react-router V4 组件嵌套

Question

以前用 react-router V2 版，路由嵌套这么写是没问题的：

目的：访问不同的 path 都会加载 Main_page 组件，根据不同的 path 会在 Main_page 组件里分别渲染 Abstract 或 React_tutorial 等这些子组件， Main_page 组件里通过 props children 即可引用这些子组件。

但是现在升级到 V4 版之后，就玩不成了，请教下 V4 版要实现上述目的该怎么办？

Answer 1

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>元素就行了

Answer 2

没用过，试试看文档：
文档

Answer 3

react-router v4的详细学习案例。这是中文版。楼上的是英文版。

https://reacttraining.cn/web/...

Answer 4

请看此文档的“路由嵌套”部分：
http://www.jianshu.com/p/ece5...

Answer 5

我是这样实现的，应该差不多

Answer 6

谢谢邀请 技术栈未使用react，建议试下react-router v4的Switch是不是能解决你的问题
参考http://blog.csdn.net/sinat_17...
示例代码：

ReactDOM.render((
  <Router history={hashHistory}>
    <Switch>
      <Route path="/" exact component={HomePage}/>
      <Route path="/user/add" component={UserAddPage}/>
      <Route component={NoMatch}/>
    </Switch>
  </Router>
), document.getElementById('root'));