React Router无法渲染组件

Question

我正在学习React路由配置。我将所有导航链接都添加到入口点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 如下。

有人可以告诉我为什么会发生这种情况吗？

- hitesh

---

请查看此链接 https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md 尝试使用 @withRouter - user5738822

Answer 1

Switch组件按照给定的顺序渲染第一个匹配到的路由。

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

由于您将“ /”作为第一个路由给出，任何内容都会匹配它并呈现App组件。

- Agney

Answer 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>

- Daniel Andrei

---

在您建议的第一个路由中添加exact后，<Route exact path="/" component={App}/>我在/about-us和/contact-us网址上得到了空白页面。我原本期望分别呈现AboutUs和ContactUs组件。这次我错在哪里了。 - hitesh