多个布局在reactjs中不起作用答案

【问题标题】：Multiple layout are not working in reactjs多个布局在reactjs中不起作用
【发布时间】：2020-07-06 12:46:52
【问题描述】：

<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>
    );
};

【问题讨论】：

看起来很奇怪。为什么需要Route 进行布局？只需用你的布局包裹你的开关，不用路由。
@demkovych，我这样做了，但还有另一个问题，我已经编辑了问题
值得看看那些 ROUTES.* 常量的值
export const ROUTES = { HOME: '/', SIGNUP: '/signup', LOGIN: '/login' }
<Route path={ROUTES.HOME} component={Login} exact strict /> 并将exact 添加到休息路线。并且您的 HOME 和 LOGIN 路由具有相同的组件

标签： reactjs routes react-router react-router-dom react-router-v4

【解决方案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>

【讨论】：

我的意思是你不需要额外的 Route 包装器。
而不是将exact 属性放在任何地方，您只需将主路由“/”移动到列表底部即可。所有其他路线很少会发生碰撞
@demkovych 我也试过了，主布局被重新渲染，但点击链接后 {props.children} 没有渲染
然后是 MainLayout 或路由组件本身的问题
@demkovych，我在问题中也附上了主要的布局和工具栏组件。你能检查一下那个编辑过的问题吗