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

大赌徒

我正在尝试创建一个文件浏览器,如 Dropbox。将有一个不确定数量的子路径,如下所示:

localhost:3001:file-manager/folder1/folder2/...folderN

我有这个:

<Route path="/file-manager/:folderName" component={LandingPage} />

这允许我访问:http://localhost:3001/file-manager/foo/bar/baz但是,当我检查时props.match我没有看到它,它只显示匹配foo,而不显示低于它的级别(bar 和 baz)。

match:
isExact: false
params: {folderName: "foo"}
path: "/file-manager/foo"
url: "/file-manager/foo"

我该怎么做?我正在阅读和观看的有关递归路由的所有教程都附加到视图中。我想更换视图。

里克登汉

几个月前我遇到了完全相同的问题。我现在找不到我使用的确切代码,但是如果我没记错的话,您可以使用星号表示“从现在开始的所有内容”,其中包括任何其他路径分隔符:

<Route path="/file-manager/:folderName*" component={LandingPage} />

这确实意味着这props.match.params.folderName将是完整的字符串,因此/如果您需要一组路径组件,则必须自己拆分它

重要提示:*将使它匹配任何东西,所以如果你有一个你想要匹配的特定路线,确保你把它放在这个之前,例如

<Route path="/file-manager/example" component={ExamplePage} />
<Route path="/file-manager/:folderName*" component={LandingPage} />

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

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

来自分类Dev

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

来自分类Dev

react-router中的嵌套路由

来自分类Dev

React Router,在参数后嵌套路由

来自分类Dev

React Router,在参数后嵌套路由

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

react-router-relay中的嵌套路由

来自分类Dev

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

来自分类Dev

react-router v5 –嵌套路由

来自分类Dev

React Router 6 alpha 4嵌套路由

来自分类Dev

嵌套路由不适用于react-router

来自分类Dev

react-router-relay中的嵌套路由

来自分类Dev

React-Router嵌套路由不起作用

来自分类Dev

React Router-无法渲染嵌套路由

来自分类Dev

React Router v4 - 嵌套路由问题

来自分类Dev

ReactJS-未呈现react-router嵌套路径

来自分类Dev

如何在React中链接到嵌套路由?

来自分类Dev

如何使React Router与静态资产,html5模式,历史API和嵌套路由一起使用?

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

react js 4中的嵌套路由

来自分类Dev

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

来自分类Dev

React-Router活动类不适用于嵌套路由

来自分类Dev

在React Router中的嵌套路由中刷新后看到空白页

Related 相关文章

  1. 1

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

  2. 2

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

  3. 3

    react-router中的嵌套路由

  4. 4

    React Router,在参数后嵌套路由

  5. 5

    React Router,在参数后嵌套路由

  6. 6

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

  7. 7

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

  8. 8

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

  9. 9

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

  10. 10

    react-router-relay中的嵌套路由

  11. 11

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

  12. 12

    react-router v5 –嵌套路由

  13. 13

    React Router 6 alpha 4嵌套路由

  14. 14

    嵌套路由不适用于react-router

  15. 15

    react-router-relay中的嵌套路由

  16. 16

    React-Router嵌套路由不起作用

  17. 17

    React Router-无法渲染嵌套路由

  18. 18

    React Router v4 - 嵌套路由问题

  19. 19

    ReactJS-未呈现react-router嵌套路径

  20. 20

    如何在React中链接到嵌套路由?

  21. 21

    如何使React Router与静态资产,html5模式,历史API和嵌套路由一起使用?

  22. 22

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

  23. 23

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

  24. 24

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

  25. 25

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

  26. 26

    react js 4中的嵌套路由

  27. 27

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

  28. 28

    React-Router活动类不适用于嵌套路由

  29. 29

    在React Router中的嵌套路由中刷新后看到空白页

热门标签

归档