未修改任何代码，昨晚正常运行的React Router今日/search路由失效

问题原因分析 #

• 路由匹配优先级错误
  Switch 组件会从上到下依次匹配路由，命中第一个符合规则的路由后就会停止后续匹配。你当前把根路由/放在第一位，且没有添加exact精确匹配属性，所有路径都会优先命中根路由规则，导致后面的/search相关路由永远不会被触发。
• 路由参数语法错误
  你配置的/search:searchTerm写法不符合动态路由参数规范，正确的动态参数写法需要在参数前加斜杠分隔，即/search/:searchTerm。你当前的写法要求路径必须是/search后直接拼接参数值（例如/searchtest）才能匹配，正常的/search/关键词格式的路径完全无法命中该规则。
• 补充验证点：如果调整以上两点后还是有问题，可以检查React Router版本是否存在不兼容变更，比如v6版本已经废弃了Switch组件改用Routes组件，路由声明规则也有调整。

修复示例代码 #

<Router>
  <Header />
  <Switch>
    {/* 给根路由添加exact精确匹配属性 */}
    <Route exact path='/'>
      <div className='app__page'>
        <Sidebar />
        <RecommendedVideos />
      </div>
    </Route>
    {/* 修正动态路由的斜杠分隔 */}
    <Route path='/search/:searchTerm'>
      <h2>Search page</h2>
    </Route>
  </Switch>
</Router>

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