我需要有一条路由,可以动态地接收许多不同的路径段,如"https://website/folder1/folder2/folder3"等等.

每次用户都可以在另一个文件夹中创建新文件夹,并且可以导航到相同的组件.

基本上,我试图实现的是创建一个类似Google Drive的带有文件夹和子文件夹系统的页面,用户可以在其中创建一个文件夹和子文件夹,并上传文档和视频,当其他用户进入嵌套的特定文件夹时,他们可以看到它们.为了跟踪用户的位置并从服务器获取要显示的正确文档/文件,我正在考虑使用URL获取最后一个路径段,以了解我需要向服务器请求哪些数据,我还需要一个面包屑的完整路径.

我找到了一些来源,建议在id路径段之后使用"+",但它不起作用:

<Route path="/area/:folder+" element={<AreaComponent />} />

问题是,这并不管用.

我用的是react-router-dom@6.4.2美元.

我如何才能实现这一点?

推荐答案

Reaction-路由v6删除了路由路径中对REGEXP的支持.你可以使用path="/area/*",然后从标牌上抓取剩余的路径.

<Route path="/area/*" element={<区域组件 />} />

示例URL:"https://website/area/folder1/folder2/folder3"

区域组件

import { useParams } from 'react-router-dom';

...

const { "*": splat } = useParams();
console.log(splat); // "folder1/folder2/folder3"

在这里,您可以使用简单的字符串操作来处理/提取路径其余部分的信息.

更多详情请参阅Splats路.

Reactjs相关问答推荐

过滤对象数组并通过迭代对象数组将属性放入新数组

滚动事件监听器在Next.js客户端组件中不触发

在Reaction中测试条件组件

在Reaction常量函数中未更新状态变量

如何在NextJS中仅在刷新页面和页面淡出页面过渡时添加全屏加载器

如何使用Reaction Testing Library+Vitest正确更新单元测试中的输入?

根据用户 Select 的注册类型更改表单字段

错误:无法获取 RSC 负载.返回浏览器导航

React Wordpress Apache 在索引之外重新加载 -> 未找到页面

使用 nextjs App Router 在动态客户端进行服务器端渲染

Formik onChange() 字段挂钩覆盖显示值和 Select 机制

无法读取未定义的react native 的属性参数

更新 Next.js 路由查询更改的状态会导致无限循环

如何从 React Redux store 中删除特定项目?

ReactJS:useMemo 钩子修复了我的无限重新渲染问题而不是 useEffect

使用 yarn 编译 protobuf js 时出现错误pbjs: command not found

react-admin useGetIdentity 只返回全名,id 未定义 头像未定义

如何不旋转 mui 自动完成弹出图标?

使用 React、Redux 和 Firebase 的无限循环

在视图列表上react 本机无限循环的反弹动画?