Question

我使用的是react-router 2.4.0，但是如果它能提供更好的处理我正在寻找的东西的能力，可以升级到4.xx，但是让我说我有以下内容：

我有X页面：pageA，pageB，pageC，pageD等。每个页面都有3个根级组件 - 导航，正文，页脚。每页的页脚都是相同的。然而，导航依赖于指示用户是否登录的redux状态，我希望在登录时呈现<Nav />并在注销时呈现<NavGuest />或其他内容。最后，主体只取决于你要渲染的页面，因此pageA，pageB可以使用一个布局，pageC等可以使用另一个。

我目前的路线如下：

<Route path="/" component={App}>
    <IndexRoute component={HomePage} />
    <Route path="A" component={pageA} />
    <Route path="B" component={pageB} />
    <Route path="C" component={pageC} />
    etc...
    <Route path="*" component={NotFoundPage} />
</Route>

在我的App组件render()中，我使用基于redux的条件逻辑来显示<Nav />或<NavGuest />，但不知道如何基于此切换布局特定的路线。您是否可以为路径添加自定义参数，以便在App组件渲染中可以读取并有条件地切换布局？

Answer 1

我最终做了什么：

<Route path="/" component={App}>
    <IndexRoute component={HomePage} />
    <Route component={LayoutOne}>
        <Route path="A" component={pageA} />
        <Route path="B" component={pageB} />
    </Route>
    <Route component={LayoutTwo}>
        <Route path="C" component={pageC} />
        etc...
    </Route>
    <Route path="*" component={NotFoundPage} />
</Route>

使用React Router处理条件布局渲染的好/优雅方法是什么？

1 个答案: