React Router匹配/-前缀动态路径渲染Home组件的正则配置问题

你之前的写法无法生效，是因为react-router的path参数基于path-to-regexp库的自定义路径语法，普通字符串中的^会被识别为字面量字符，而非正则的路径起始锚点，因此<Route path="/^-" component={Home} />实际只会匹配路径为/^-的场景，完全不符合需求。

react-router本身提供了动态路径参数语法，完全可以满足需求，无需手写全路径正则，还能方便获取路径中的ID值。

React Router v6（当前主流版本） #

匹配单层/-{ID}路径（如/-MX9EnU6aOtENtdQxLvF） #

如果仅需要匹配路径为/-后直接跟ID、无后续子路径的场景，写法如下：

<Route path="/-:id" element={<Home />} />

如果需要限制ID的字符格式（比如仅允许大小写字母+数字），可以给动态参数加正则约束：

<Route path="/-:id([A-Za-z0-9]+)" element={<Home />} />

匹配带后续子路径的场景（如/-{ID}/edit） #

如果需要匹配所有以/-{ID}开头的任意子路径，在路径末尾加/*即可：

<Route path="/-:id/*" element={<Home />} />

注：在Home组件内可以通过useParams()直接获取ID值，例如const { id } = useParams()。

React Router v5 版本 #

匹配单层/-{ID}路径 #

v5默认是前缀匹配，如果需要仅匹配/-{ID}的单层路径，需要加exact属性：

<Route exact path="/-:id" component={Home} />

如果需要限制ID字符格式，写法和v6一致：

<Route exact path="/-:id([A-Za-z0-9]+)" component={Home} />

匹配带后续子路径的场景 #

不需要加exact属性即可匹配所有以/-{ID}开头的路径：

<Route path="/-:id" component={Home} />

注：v5中可以通过useParams()或者props.match.params获取ID值。

如果确实需要使用原生正则作为匹配规则，react-router也支持直接传递正则对象给path属性，注意该方式无法直接获取动态参数，需要自行解析路径，因此不推荐使用：

• v6写法：

<Route path={/^\/-[A-Za-z0-9]+$/} element={<Home />} />

• v5写法：

<Route path={/^\/-[A-Za-z0-9]+$/} component={Home} />

内容的提问来源于stack exchange，提问作者Tarun Ravi