多个布局在 reactjs 中不起作用

Question

<Router history={history}>
    <Route>
            <MainLayout>
                <Switch>
                    <Route path={ROUTES.HOME} component={Login} />
                    <Route path={ROUTES.LOGIN} component={Login} />
                    <Route path={ROUTES.SIGN_UP} component={SignUp} />
                </Switch>
            </MainLayout>
        </Route>
</Router>

即使路由更改为登录，它也只呈现注册组件。在下面附加主布局和工具栏组件

const MainLayout = (props) => {
    return (
        <React.Fragment>
            <Toolbar />
            {props.children}
        </React.Fragment>
    );
};

const Toolbar = () => {
    return (
        <header>
            <nav>
                <Link to="/login">Login</Link>
                <Link to="/signup">Register</Link>
            </nav>
        </header>
    );
};

Answer 1

它应该有这样的结构：

<Router history={history}>
  <MainLayout>
    <Switch>
      <Route path={ROUTES.HOME} exact strict component={Login} />
      <Route path={ROUTES.LOGIN} exact component={Login} />
      <Route path={ROUTES.SIGN_UP} exact component={SignUp} />
    </Switch>
  </MainLayout>
</Router>