反应路由器不渲染组件

Posted 2023-02-21

【中文标题】反应路由器不渲染组件

【英文标题】：react router not rendering the component

【发布时间】：2018-07-26 04:20:02

【问题描述】：

我正在尝试学习反应路由配置。我将所有导航链接添加到入口点 index.js 的一个地方，我的期望是当有人对导航期间配置的路径做出反应时，应在浏览器中加载相应的组件。我在我的入口文件 index.js 中添加了所有路由路径，如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app.js';
import  BrowserRouter, Route, hashHistory  from 'react-router-dom';
import AboutUs from './AboutUs.js';
import ContactUs from './ContactUs.js';
import Switch from 'react-router';

ReactDOM.render(
  (<BrowserRouter>
     <Switch>
          <Route path="/" component=App/>
          <Route path="/about-us" component=AboutUs/>
          <Route path="/contact-us" component=ContactUs/>
     </Switch>
   </BrowserRouter>)
, document.getElementById('app'));

app.js 如下：

import React,  Component  from 'react';
import  BrowserRouter as Router, Switch, Route, Link  from 'react-router-dom';

class App extends Component 

  constructor(props)
    super(props);

  


  render() 
   return (
     <div>
       <h1>React Router Tutorial</h1>
       <ul role="nav">
         <li><Link to="/about-us">About</Link></li>
         <li><Link to="/contact-us">Contact</Link></li>
       </ul>
     </div>
   )
 


export default App;

AboutUs.js 如下：

import React,  Component  from 'react';

class AboutUs extends Component 

  render()
    return(
      <div>
        AboutUs
      </div>
    );
  


export default AboutUs ;

ContactUs.js 如下：

import React,  Component  from 'react';

class ContactUs extends Component

  render()
    return(
      <div>
        Contact Us
      </div>
    );
  


export default ContactUs;

但是当我点击任何链接 /about-us 或 /contact-us 时，它不会加载任何内容并显示相同的 app.js 如下

谁能告诉我为什么会这样？

【问题讨论】：

请看这个链接github.com/ReactTraining/react-router/blob/master/packages/…试试@withRouter

【参考方案1】：

Switch 按照给定的顺序呈现它匹配的第一个路由。

<BrowserRouter>
  <Switch>
       <Route path="/about-us" component=AboutUs/>
       <Route path="/contact-us" component=ContactUs/>
       <Route path="/" component=App/>
  </Switch>
</BrowserRouter>

因为您已将“/”作为第一条路线，所以任何东西都会匹配它并呈现 App 组件。

【参考方案2】：

我相信它与您的第一条路线相匹配，App，因为您没有指定它应该是exact。

你可以这样做：

<Switch>
          <Route exact path="/" component=App/> // it will match only for '/'
          <Route path="/about-us" component=AboutUs/>
          <Route path="/contact-us" component=ContactUs/>
</Switch>

【讨论】：

按照您的建议在第一条路线中添加精确后 我在网址 /about-us 和 /contact-us 上得到空白页。我期待分别呈现 AboutUs 和 ContactUs 组件。这次我哪里错了。