我有一个带有react router v4到另一个组件的组件,我想在第二个组件中添加另一个路由。
这是主要路线:
const Dashboard = () => {
return (
<div>
<Header/>
<Router>
<div>
<Route path="/" exact component={Wall} />
<Route path="/challenge/:id" component={Challenge} />
</div>
</Router>
</div>
)
}
这是挑战部分:
class Challenge extends Component {
...
render() {
return (
...
<Router>
<div>
<Route path="/overview" exact component={Overview} />
<Route path="/discussions" exact component={Discussions} />
</div>
</Router>
...
)
}
}
这对我不起作用..
唯一有效的选择是将/challenge/:id 包含在挑战组件中:
<Route path="/challenge/:id/overview" exact component={Overview} />
<Route path="/challenge/:id/discussions" exact component={Discussions} />
最后我想让路线看起来像这样:
www.site.com/challenge/1/overview
www.site.com/challenge/1/discussions
但不包含每个嵌套路由中的完整路由。
最佳答案
在您的挑战
组件中尝试一下:
class Challenge extends Component {
...
render() {
const { match } = this.props;
return (
...
<div>
<Route path={`${match.url}/overview`} exact component={Overview} />
<Route path={`${match.url}/discussions`} exact component={Discussions} />
</div>
...
)
}
}
请注意,您不需要添加新的 Router
实例,因为您的 Challenge
组件是您定义的 Router
实例的后代在您的顶级 Dashboard
组件中。
关于reactjs - React router v4 嵌套路由相对路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47205721/