反應路由器不渲染組件

Question

我正在嘗試學習反應路由配置。 我在入口點 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 如下

有人可以告訴我為什么會這樣嗎？

Answer 1

Switch按照給定的順序呈現它匹配的第一個路由。

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

因為您已將 '/' 作為第一條路由，所以任何內容都會匹配它並呈現 App 組件。

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>