react-router-dom相似动态路由路径匹配错误如何解决？

问题根因 #

• Switch组件的路由匹配规则是从上到下优先匹配第一个符合规则的路由，你把动态参数路由/usermanager/:id放在了静态路由/usermanager/Edit/:id前面，访问/usermanager/Edit/1时，路由会把Edit识别为/usermanager/:id中的id参数，直接命中SingleEmployee对应的路由，不会继续向下匹配。
• 你存在拼写错误，将exact错写为exaxt，导致精确匹配属性完全没有生效，进一步加剧了匹配混乱的问题。

解决方法 #

调整路由顺序，把更具体的静态前缀路由放在动态参数路由前面，同时修正拼写错误，修改后的配置如下：

<BrowserRouter>
  <Switch>
    <Route exact path="/Login" > <Login /> </Route>
    <Route exact path="/usermanager"> <Protected Cmp={ViewAllUsers} />  </Route>
    {/* 更具体的Edit路由放在动态id路由前 */}
    <Route exact path={"/usermanager/Edit/:id"}> <Protected Cmp={EditEmployee} /></Route>
    <Route exact path={"/usermanager/:id"}> <Protected Cmp={SingleEmployee} /></Route>
    <Redirect exact from="/" to="/Login" />
  </Switch>
</BrowserRouter>

调整之后访问/usermanager/Edit/1会优先命中EditEmployee的路由，只有当/usermanager/后面的第二段不是Edit的时候，才会匹配到SingleEmployee的动态id路由。

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