无法使用React Router获得嵌套路由以进行匹配

布兰登

我在获取嵌套路线以进行匹配时遇到了麻烦:

<Router history={browserHistory}>
  <Route path="/" component={App}>
    <IndexRoute component={Home} />
    <Route path="about" component={About} />
    <Route path="work" component={Work}>
      <Route path=":slug" component={Sample} />
    </Route>
  </Route>
</Router>

在使用此路由器的情况下,我无法匹配以下路由:/work/sample-1应用程序不会引发错误,我也无法在Sample该类上记录任何语句

即使我对要匹配的值进行了硬编码,也无法使用。如果我取消嵌套该路线,并将其设置为路径,work/:slug则可以按预期工作。

我究竟做错了什么?

布兰登

终于在React Router Github页面“ sidebar”示例中找到了我正在寻找的模式

我嵌套了路线:

<Router history={browserHistory}>
  <Route path="/" component={App}>
    <Route path="work" component={Work}>
      <Route path=":slug" component={Sample} />
    </Route>
  </Route>
</Router>

然后render,在Work组件方法中,我只需要显示路线的子代或组件的其余部分:

render() {
    <div>
        {this.props.children ||
        <div>
            {/* rest of "Work" component here */}
        </div>}
    </div>
}

现在,当我导航到嵌套路线时,将选择我的导航项,并显示嵌套内容。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

React Router V5:在动态路由中需要嵌套路由

来自分类Dev

react-router中的嵌套路由

来自分类Dev

react-router-relay中的嵌套路由

来自分类Dev

react-router-创建没有组件嵌套的嵌套路由

来自分类Dev

在React-Router中找不到嵌套路由的字体

来自分类Dev

react-router的嵌套路由中的“ children”类型是什么?

来自分类Dev

使用React Router 2进行单元测试路由匹配

来自分类Dev

React-Router:嵌套路由而不嵌套带有通配符路径的组件

来自分类Dev

React Router,在参数后嵌套路由

来自分类Dev

如何使用react-router从嵌套路由的根目录重定向?

来自分类Dev

react-router v5 –嵌套路由

来自分类Dev

无法在React Router v5上打印嵌套路由的子组件

来自分类Dev

React Router 6 alpha 4嵌套路由

来自分类Dev

将Reach Router与嵌套路由一起使用无法解析参数

来自分类Dev

React Router Dom嵌套路由,或者如何传递

来自分类Dev

React Router V5:在动态路由中需要嵌套路由

来自分类Dev

react-router:无法在其他视图中显示嵌套路由

来自分类Dev

嵌套路由不适用于react-router

来自分类Dev

ui-router中的嵌套路由无法解析

来自分类Dev

react-router-relay中的嵌套路由

来自分类Dev

React-Router:嵌套路由而不嵌套带有通配符路径的组件

来自分类Dev

React Router,在参数后嵌套路由

来自分类Dev

React-Router嵌套路由不起作用

来自分类Dev

React Router-无法渲染嵌套路由

来自分类Dev

使用React Router v4的嵌套路由-解决方案

来自分类Dev

React Router:为什么嵌套路由使 React 在同一页面上呈现

来自分类Dev

React Router v4 - 嵌套路由问题

来自分类Dev

如何使用 React Router - ReactJS 添加嵌套和非嵌套路由?

来自分类Dev

React Router:如何匹配嵌套路由的不确定数量的子路径?

Related 相关文章

  1. 1

    React Router V5:在动态路由中需要嵌套路由

  2. 2

    react-router中的嵌套路由

  3. 3

    react-router-relay中的嵌套路由

  4. 4

    react-router-创建没有组件嵌套的嵌套路由

  5. 5

    在React-Router中找不到嵌套路由的字体

  6. 6

    react-router的嵌套路由中的“ children”类型是什么?

  7. 7

    使用React Router 2进行单元测试路由匹配

  8. 8

    React-Router:嵌套路由而不嵌套带有通配符路径的组件

  9. 9

    React Router,在参数后嵌套路由

  10. 10

    如何使用react-router从嵌套路由的根目录重定向?

  11. 11

    react-router v5 –嵌套路由

  12. 12

    无法在React Router v5上打印嵌套路由的子组件

  13. 13

    React Router 6 alpha 4嵌套路由

  14. 14

    将Reach Router与嵌套路由一起使用无法解析参数

  15. 15

    React Router Dom嵌套路由,或者如何传递

  16. 16

    React Router V5:在动态路由中需要嵌套路由

  17. 17

    react-router:无法在其他视图中显示嵌套路由

  18. 18

    嵌套路由不适用于react-router

  19. 19

    ui-router中的嵌套路由无法解析

  20. 20

    react-router-relay中的嵌套路由

  21. 21

    React-Router:嵌套路由而不嵌套带有通配符路径的组件

  22. 22

    React Router,在参数后嵌套路由

  23. 23

    React-Router嵌套路由不起作用

  24. 24

    React Router-无法渲染嵌套路由

  25. 25

    使用React Router v4的嵌套路由-解决方案

  26. 26

    React Router:为什么嵌套路由使 React 在同一页面上呈现

  27. 27

    React Router v4 - 嵌套路由问题

  28. 28

    如何使用 React Router - ReactJS 添加嵌套和非嵌套路由?

  29. 29

    React Router:如何匹配嵌套路由的不确定数量的子路径?

热门标签

归档