如何正确配置含id与new的React Route路由？

这确实是React Router里非常常见的路由匹配优先级问题，我来给你两个直接有效的解决办法：

方法1：使用<Switch>组件（推荐） #

React Router的<Switch>组件会从上到下遍历所有子路由，只渲染第一个匹配成功的路由，这是解决这类冲突最稳妥的方式。你只需要把所有路由用<Switch>包裹，并且把静态路径（比如/new）放在动态参数路径（/:id）的前面即可：

import { Switch, Route } from 'react-router-dom';

// 在你的父组件路由中
<Switch>
  <Route exact path={`${match.url}/`} component={List} />
  <Route exact path={`${match.url}/new`} component={New} />
  <Route exact path={`${match.url}/:id`} component={View} />
</Switch>

原理很简单：当你访问${match.url}/new时，<Switch>会先匹配到第二个路由（/new），就会直接渲染New组件，不会再继续检查后面的/:id路由，彻底避免了new被识别为id参数的问题。

方法2：调整路由顺序（无Switch场景） #

如果出于某些原因不想使用<Switch>，你可以把静态路由放在动态路由的最前面。不过要注意：这种方式仅在你确保没有其他匹配冲突的情况下生效，而且React Router仍然会渲染所有匹配的路由——但因为静态路由先被匹配，且exact属性会严格匹配路径，所以理论上/new不会再被/:id匹配（不过还是更推荐用<Switch>，它的语义更明确）。

为什么原来的配置会出问题？ #

因为React Router默认会渲染所有匹配成功的路由组件，而/:id这种动态参数路由会匹配任何非空的子路径（包括new）。当你访问/new时，/${match.url}/new同时满足/${match.url}/new和/${match.url}/:id的exact匹配条件，所以两个组件都会被渲染出来。

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