如何避免路由冲突？

Posted 2023-02-21

【中文标题】如何避免路由冲突？

【英文标题】：How can I avoid a route collision?

【发布时间】：2018-02-03 02:27:43

【问题描述】：

我想在用户访问/Products/1时渲染一个<Product>。

当用户访问/Products/new时，我想渲染一个<CreateProduct>。

我的路由器是这样的：

<Route exact path="/Products/new" component=CreateProduct />
<Route exact path="/Products/:productId" component=Product />

如果用户浏览到/Products/new，它会匹配两个路由并导致Product 组件抛出错误re: not find a product with id new。

我无法在 react-router 文档中找到任何内容来避免这种情况。我可能会使用这个 hack，但必须有一个“更好”的方法：

<Route exact path="/Products/new" component=CreateProduct />
<Route exact path="/Products/:productId" render=renderProduct />

使用函数渲染<Product> 路由：

const renderProduct = props =>
  props.match.params.productId === 'new'
    ? null
    : <Product ...props />;

【参考方案1】：

使用<Switch />:

<Switch>
  <Route exact path="/Products/new" component=CreateProduct />
  <Route exact path="/Products/:productId" component=Product />
</Switch>

它将尝试找到第一个匹配项。 所以/Products/new 将匹配第一条路线并跳过第二条路线。 /Products/1 将匹配第二个。

【讨论】：

这正是我所需要的。我猜我的 google foo 不太符合标准。当计时器允许时将接受

你使用 react-router v4，对吧？比以前的版本更容易理解。

您可以阅读：reacttraining.com/react-router/web/example/ambiguous-matches