React路由器：如何在不同的頁面上呈現兩個不同的組件？

Question

我正在構建一個反應應用程序。我正在使用react-router-dom V4。

class TodoApp extends React.Component{ 
    render(){ 
     return(
      <Router> 
       <div> 
        <Route path='/' component={TodoComponent}></Route> 
        <Route path='/about' component={About}></Route> 
       </div> 
      </Router> 
     ); 
    } 
} 

如何在不同的頁面上渲染這兩個不同的組件？這是輸出的外觀：

TodoReact APP

Answer 1

您需要將屬性添加到exact根/途徑，目前兩條路線匹配​​，所以這兩個組件將顯示：

<Route exact path="/" component={TodoComponent} />