加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

react-router – react router,匹配wildcard作为参数

发布时间:2020-12-15 05:06:24 所属栏目:百科 来源:网络整理
导读:我有一个遗留的Web应用程序正在被React取代,它被这些不同的系统调用,通过传递一个URL(从记录和现有数据库系统派生)应用程序呈现文件夹视图,沙盒容器中的文件根据路径传入. 我需要能够识别这些请求并将它们路由到文件/文件夹处理页面,将路径的’/ files /部分
我有一个遗留的Web应用程序正在被React取代,它被这些不同的系统调用,通过传递一个URL(从记录和现有数据库系统派生)应用程序呈现文件夹视图,沙盒容器中的文件根据路径传入.

我需要能够识别这些请求并将它们路由到文件/文件夹处理页面,将路径的’/ files /部分后面的所有内容作为参数处理到文件或文件夹的路径.

<Route path="/" handler={Master}>
  <Route name="files_link" path="files" handler={Files} />
  <Route name="filesWithPath_link" path="files/*:path" handler={Files} />
</Route>

我希望能够处理传入的请求

/files

并在页面中处理它(默认为顶级文件夹,因为没有路径参数传递.

并将以下所有可能的URL示例传递给路由器,并从/ files /之后的位中提取路径参数.

/files/folder                                 path=folder
/files/folder/filename.ext                    path=folder/filename.ext
/files/folder/folder1                         path=folder/folder1
/files/folder/folder1/filename.ext            path=folder/folder1/filename.ext
/files/folder/folder1/folder2/                path=folder/folder1/folder2
/files/folder/folder1/folder2/filename.ext    path=folder/folder1/folder2/filename.ext

.... and so on ...

当我尝试这个时,我得到一个错误

Uncaught Invariant Violation: Missing "splat" parameter for path "/beta/page/files/*:path"

我目前正在使用react 0.14.2和react-router 0.13.4.

你如何在React-router中以这种方式处理可变长度路径?

您需要像这样使用它:
<Route name="filesWithPath_link" path="files/*" handler={Files} />

然后在您的React组件中,您可以访问splat的值:

// The '*' in the path match gets assigned to this.props.params.splat
    var path = this.props.params.splat;

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读