时间戳

首页 > 解决方案 > React Router 4 根据路径渲染多个布局？

reactjs - React Router 4 根据路径渲染多个布局？

问题描述

这是我正在尝试使用的一个非常简单的示例。

export default class AppRouter extends Component {
  render() {
    return (
      <div className="website-wrapper">
        <Switch>
          <MainLayout>
            <Route exact path="/" component={App} />
          </MainLayout>
          <AnonLayout>
            <Route path="/login" component={LoginContainer} />
          </AnonLayout>
          <Route component={NotFound} />
        </Switch>
      </div>
    );
  }
}

非常简单，但它没有像您期望的那样运行

它总是渲染mainLayout并且仅显示App确切路径为 时的内容/。

AnonLayout并且NotFound根本不会触发。

我曾经能够在版本 3 中做类似的事情，但这不适用于最新版本，似乎他们改变了路由在版本 4 中完全工作的方式，并且文档没有提及布局和渲染布局。

感谢帮助！

标签： reactjslayoutreact-router

解决方案

不太确定您要在这里做什么，但是如果您不想将 MainLayout 放在 App 组件中，则可以执行以下操作：

<Route exact path="/" render={() => 
  <MainLayout>
    <App />
  </MainLayout>
/>

推荐阅读