我有一个带有 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
但不包含每个嵌套路由中的完整路由。
在你的试试这个Challenge
成分:
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
成分。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)