React Router路由匹配异常 调整顺序后出现组件错配问题

问题诱因 #

该问题由三个核心错误共同导致：

• 路径拼写不一致：你代码中定义的动态测试路由路径为/tests/:testId（复数tests），但你实际访问的测试路径为/test/d567c9ce5a09a05de6cceaea7cac34d8（单数test），路径不匹配导致初始状态下无法命中CompleteTest对应的路由。
• 未使用<Switch>包裹路由：React Router v5 默认会渲染所有路径匹配的<Route>组件，只有用<Switch>包裹所有路由标签后，才会按从上到下的顺序匹配，仅渲染第一个命中的路由。你缺少该配置导致路径不匹配的路由被意外渲染。
• 动态路由与固定路由顺序错误：如果你的实际代码中动态路由路径为/:testId（省略了前缀），参数路由的优先级低于固定路径路由，必须将/draft这类固定路径路由放在动态路由之前，否则draft会被识别为testId的参数值，命中动态路由渲染CompleteTest组件。

修复方案 #

1. 修正路径拼写，保持访问路径与路由定义的一致性；
2. 用<Switch>包裹所有<Route>标签；
3. 固定路径路由放在动态路由之前，避免参数路由拦截固定路径。

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