时间戳

首页 > 解决方案 > ReactRouter：捕获部分路径并同时指定要匹配的值

reactjs - ReactRouter：捕获部分路径并同时指定要匹配的值

问题描述

我有一条路径，其格式/somePath/:name需要:name成为已知字符串之一。我读到 Route 组件支持要匹配的 URL 数组，因此生成支持的路径列表很容易，但这样做会带走自动捕获部分路径的便利。

例如，我目前有一个如下定义的 Route 组件。

<Route exact path={SomeKnownNames.map(n => `/somePath/${n}`)} component={SomeRoute} />} />

这应该可行，但我无法再访问props.match.paramsRoute 组件中的值。有没有办法在不手动解析 URL 的情况下实现这一点？

:name让我补充一点，如果 的值不在已知字符串中，我不想匹配。

我正在使用 react-router-dom v5。

标签： reactjsreact-router

解决方案

显然，这有效：

<Route exact path={SomeKnownNames.map(n => `/somePath/:name(${n})`)} component={SomeRoute} />} />

即如果你这样做/somePath/:name(foo)，那么它匹配/somePath/foo，并被foo捕获在props.match.params.name路由组件中。

推荐阅读