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>

反应路由器加载两个组件

1 个答案: