Question

这是我尝试使用的非常简单的示例。

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中的工作方式，并且文档中没有提到布局和渲染布局。

感谢帮助！

Answer 1

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

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

React Router 4基于路径渲染多个布局？

1 个答案: