反应路由器，匹配通配符作为参数

Question

我有一个遗留的网络应用程序正在被 React 取代，这些不同的系统通过传递一个 URL（从现有数据库系统中的记录派生）调用它，该应用程序呈现文件夹视图，根据传入的路径，沙盒容器中的文件。

我需要能够识别这些请求并将它们路由到 File/Folder 处理页面，将路径的 '/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 中以这种方式处理可变长度路径？

Answer 1

你需要这样使用它：

<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;

Answer 2

为了完整起见，splat 参数可以从 useParams() 挂钩访问为属性 0:

const splat = useParams()[0];

反应路由器，匹配通配符作为参数

react router, match wildcard as parameter

wildcard

url-routing

react-router