我有一个组件与一个反应路由器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/概述
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
组件中定义的实例的后代。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句