javascript - 使用 React Router 的分层路由

标签 javascript reactjs react-router

如果我想要有一个路线层次结构,并将事件状态应用于我的导航,但某些级别的导航纯粹是逻辑性的。

例如,如果我这样做

<Route component={App} path="/" >
        <Route path="example" component={empty}>
            <Route path="ex1" component={ex1} />
            <Route path="ex2" component={ex2} />
            <IndexRedirect to="ex1" />
        </Route>
 </Route>

我的导航节点示例正确应用了事件状态,但随后我必须创建一个空组件,它只渲染子组件。

或者,我可以展平路线,这意味着我不再需要创建空组件,但我不再获得事件导航状态。

有什么好的解决办法吗? (我使用的是最新的react-router v2.0.0rc5)

最佳答案

您可以省略空组件。我会把你的例子写成:

<Route path="/" component={App} >
  <Route path="example">
    <IndexRedirect to="ex1" />
    <Route path="ex1" component={ex1} />
    <Route path="ex2" component={ex2} />
  </Route>
</Route>

这被认为是惯用的。

关于javascript - 使用 React Router 的分层路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34872935/

相关文章:

reactjs - 使用 Webpack 创建 React 应用程序依赖问题

javascript - 重新渲染 React props.children

javascript - React Router DOM 无法读取位置状态

javascript - JavaScript 中的警报消息

javascript - 创建一个帮助点击函数 jquery/javascript

javascript - jQuery 根据索引删除复选框

javascript - 无法在第一页加载时获取参数

javascript - 如何过滤可能是几个树级别深度的父子数组的多个属性

reactjs - 将预先存在的静态 HTML 页面添加到 React/Gatsby 站点的最快方法

node.js - 为什么 React 路由不能在服务器上正常工作?