Question

我正在我的应用程序中构建一个组件，允许用户导航包含子目录和文件的目录。子目录的数量没有限制。

我想使用URL来指示子目录的位置。例如，采用以下结构：

- dir
-- sub-dir1
---- sub-dir2
------ sub-dir5
-------- image.jpg
---- sub-dir3
---- sub-dir4

如果有人导航到sub-dir5，那么我希望显示以下网址：

`myapp.com/dir/sub-dir1/sub-dir2/sub-dir5`

虽然如果使用:param值预先知道文件夹结构，我知道如何执行此操作，但我不确定如何在可能有任意数量的子目录时设置路由。

我正在使用react-router v4

Answer 1

唯一的方法是创建一个根路由，它将接受一个（可选的）参数，这是您的文件系统路径。

<Route exact path='/:path' component={ DirListing } />

然后，您需要在组件中解析它（由/拆分）以确保它有效。获得路径后，您可以加载文件列表并将其显示给用户。

我甚至会说你真的不需要React Router，因为你最终会自己解析路由。 React Router make虽然有点容易。

最后一点，请确保将所有请求重定向回您的反应应用程序（或者您将最终获得服务器端列表）。

Answer 2

怎么样

import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Link,
  Route,
  Switch
} from "react-router-dom";

ReactDOM.render(
  <Router>
    <Switch>
      <Route exact strict path="/:folderPath+/" component={DirList} />
      <Route path="/:folderPath+/:fileName" component={Detail} />
    </Switch>
  </Router>,
  node
);

或其他渲染部分

ReactDOM.render(
  <Router>
    <Switch>
      <Route exact strict path="/:folderPath+/:fileName" component={Detail} />
      <Route path="/:folderPath+/" component={DirList} />
    </Switch>
  </Router>,
  node
);

这将以/结尾的路由名称添加到<DirList />，否则以<Detail />

strict需要用来区分路径是否包含结尾/。

由于exact允许子路径，因此需要

strict。否则，对于代码示例的大写字母，路径some/folder/file.png可以落入/:folderPath+/中，对于小写字母，路径some/folder/可以落入/:folderPath+/:fileName中。通过认识的例子 params: { folderPath: 'some', fileName: 'folder/' }

的路径 {p> Route path doc，Route path regExp rules

Route exact and strict doc

用于导航目录的react-router

2 个答案: