reactjs - React Router：从通用`/：slug`路径中排除字符串

Question

我正在尝试根据路由设置以下 UI

• /things/- 显示项目列表（组件 A）
• /things/new- 显示项目列表，带有模态表单覆盖（组件 A 和组件 B）
• /things/:slug- 显示特定项目（组件 C）

使用此设置：

• /things/将显示组件 A
• /things/new将显示组件 A 和组件 B
• /things/:slug将仅显示组件 C

这一切都在嵌套路线中 - /things. 这意味着pathfromuseRouteMatch返回/things

我已经尝试了几个与 的组合Switch，并尝试使用和matchPath区分useRouteMatch但没有运气。每次尝试都会导致其中一条路径未返回正确的组件。/new/:slug

例如：

<Switch>
  <Route path="/:slug(exclude "new")" exact component={ComponentC} />
  <Route path="/" exact component={ComponentA} />
</Switch>
<Route path="/new" component={ComponentB} />

我尝试过的另一个选择是在 slug 上使用正则表达式，以匹配 slug 模式。假设蛞蝓模式是xxx-xxx-xxx-###，然后我尝试了：

<Route path="/:slug((\w*-)*(\d*))" component={ComponentC) />

但由于某种原因，这与路线不匹配。

我想我可以使用location.pathname，但这似乎是一个黑客。

是否可以使用此设置将上述路线与标准<Route path="[something]" />组件进行匹配和渲染？

标签： reactjsreact-routerreact-router-domreact-router-v5

Answer 1

这就是我喜欢 Stack Overflow 的原因。问这个问题通常会让你自己回答。

我正在浏览 React Router 文档以获取有关正则表达式的信息，并发现该Route path属性可以接受一组路径。所以我选择了这个：

const { path } = useRouteMatch()

<Route path={[path, `${path}/new`]} exact component={ThingsList} />
<Switch>
  <Route path={`${path}/new`} render={() => <NewThing path={path} />} />
  <Route path={`${path}/:slug`} render={() => <Thing path={path} />} />
</Switch>