如何避免路由冲突？答案

【问题标题】：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 将匹配第二个。

【讨论】：