javascript - react-router V4 组件嵌套
本文介绍了javascript - react-router V4 组件嵌套的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
以前用 react-router V2 版,路由嵌套这么写是没问题的:
目的:访问不同的 path 都会加载 Main_page 组件,根据不同的 path 会在 Main_page 组件里分别渲染 Abstract 或 React_tutorial 等这些子组件, Main_page 组件里通过 props children 即可引用这些子组件。
但是现在升级到 V4 版之后,就玩不成了,请教下 V4 版要实现上述目的该怎么办?
解决方案
4.x的写法挺容易理解的
<Router>
<Route path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/topics" component={Topics}/>
</Router>
这样的三个组件、没有用到exact、如果你的路由是/about、在展示Home组件的同时、会展示About组件、
home就可以作为最外层使用
如果使用exact、可以自己试一下、每一个路由都是独立的
如果是嵌套
<Router>
<Route path="/" component={Home}/>
</Router>
Home.tsx
export class BannerManager extends React.Component<any, any>{
render() {
render(
<div className="btn-group">
<Link to="/">首页</Link>
<Button type="primary">发布</Button>
<Button type="primary">撤销发布</Button>
<Route path="/about" component={About}/>
<Route path="/more" component={More}/>
</div>
)
}
}
如果想要更深的嵌套、只需要在About中再加入<Route>元素就行了
这篇关于javascript - react-router V4 组件嵌套的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文