反應路由器加載這兩個組件

Question

我正在編寫一個簡單的登錄系統，如果我想讓自己註冊，那麼這兩個組件都會加載到應用程序組件中。

我的代碼：

class App extends React.Component { 
    render() { 
     return (
     <div className="row"> 
      <Header/> 
      <BrowserRouter history={browserHistory}> 
       <div> 
       <Route path="/" component={Login}/> 
       <Route path="/register" component={Register} /> 
       </div> 
      </BrowserRouter> 
     </div> 
    ); 
    } 
} 

Answer 1

變化

<Route path="/" component={Login}/> 

要

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

您還可以使用Switch組件始終確保只有一個組件被渲染，但要小心與命令。在這種情況下，它會是這樣的：

<Switch> 
    <Route path="/register" component={Register} /> 
    <Route path="/" component={Login}/> 
    </Switch>