Question

以下是我试图在react-router中配置的嵌套路由：

<Route path="/" component={App}>
    <Route path="student/:studentId" onEnter={checkAuth} component={Student}>
        <Route path="edit" onEnter={checkAuth} component={StudentForm} />
    </Route>
</Route>

student/:studentId网址应显示该特定studentId的所有详细信息。

嵌套的student/:studentId/edit应该显示一个表单来编辑以前显示的值。

我要避免的是必须将StudentForm组件嵌套在Student组件中，并直接在App内显示该表单。

我一直在阅读react-router repo中的所有文档，特别是这一个：Decoupling the UI from the URL，但它恰恰相反（如何将组件嵌套在另一个组件中，但可以通过不同的网址。

我可以检查网址是否为edit并呈现表单而不是学生列表，但我希望它能避免条件渲染。

是否有人知道使用react-router实现此目的的方法？

Answer 1

显然，解决方案就像在路由器配置中嵌套路由一样简单：

web: bundle exec puma -t 1:1 -p ${PORT:-3000} -e ${RACK_ENV:-development}
worker: bundle exec rake jobs:work

此配置不会嵌套组件。

如何使用react-router将UI与URL分离？

1 个答案: