React Router DOM v6如何配置不定数量的路由参数？

方案：使用通配符路由匹配任意层级 #

React Router支持通配符路由来匹配多级路径，无需手动声明每一层级。只需修改路由配置，再在组件中解析路径参数即可。

1. 更新Routes.js的路由配置 #

把原路由的:params替换为通配符*，让它匹配/test/之后的所有路径内容：

// Routes.js
<Route path='/test/*' element={<Test />} />

2. 在Test.js中解析多级参数 #

通过useParams获取通配符对应的参数（键名为"*"），再用split('/')拆分成层级数组：

// Test.js
import { useParams } from 'react-router-dom';

const Test = () => {
    const { "*": pathSegments } = useParams();
    // 拆分路径并过滤空字符串（避免首尾斜杠产生的无效元素）
    const folderHierarchy = pathSegments ? pathSegments.split('/').filter(seg => seg) : [];
    
    console.log('当前文件夹层级:', folderHierarchy);
    // 访问/test/home/room时，会输出 ["home", "room"]

    return (
        <div>当前位置：{folderHierarchy.join(' / ')}</div>
    )
}

export default Test;

补充说明 #

• 通配符*会匹配/test/之后的任意长度路径，不管层级深度
• 拆分得到的数组可以直接用于构建导航面包屑、加载对应层级的待办内容等业务逻辑
• 如果需要限制路径格式（比如仅允许字母数字的文件夹名），也可以使用正则表达式路由，但通配符已能满足大多数层级导航需求

内容的提问来源于stack exchange，提问作者Lucas Villanueva