反应路由器加载这两个组件

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>