javascript - react 路由器加载两个组件

Question

我正在编写一个简单的登录系统，如果我想让自己注册，这两个组件都会加载到 App 组件中。

我的代码:

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>