Question

路线设计是：

/:projectId/ - ＆gt;列表

/:projectId/:taskId - ＆gt;细节

代码是：

<Route path='/:projectId' component={Project} />

和

const Project = ({ match }) => <Switch>
 <Route path={match.url} component={List} />
 <Route path={`${match.url}/:taskId`} component={Detail} />
</Switch>

我喜欢嵌套模式，因为它更容易验证url是匹配还是我需要重定向。但是这里的问题是我无法阅读projectId内<Detail />及其所有子组件，但内部的某些功能确实取决于projectId。将projectId作为道具一直向下传递是一种解决方案，但这就是我想通过首先使用react-router来摆脱这种情况。我该如何正确地做到这一点？

Answer 1

你足够近了！只是你在这里做的筑巢是不必要的。

<Switch>
    // Put this <Route /> first otherwise the second will always match.
    <Route path="/:projectId/:taskId" render={props => (
        <h1>{props.match.params.projectId} / {props.match.params.taskId} </h1>
    )} />

    <Route path="/:projectId" render={props => (
        <h1>{props.match.params.projectId}</h1>
    )} />
</Switch>

然后，对于URL验证，通常此检查应该在您的componentWillMount或将获取项目/任务的操作中进行。您仍然可以使用this.props.replace('/404');进行重定向。

[react-router v4]我是否可以在嵌套的路由模式中读取父参数？

1 个答案: