react-router-dom v6.0.2配置多路由仅能访问根路径'/'如何解决？

故障原因及解决方法 #

• 首先修正路由配置的标签语法错误：你的代码中结束标签写为了自闭合形式<Routes/>、<HashRouter/>，不符合XML语法规范，正确的结束标签应为</Routes>、</HashRouter>。错误的写法会导致Routes组件无法识别内部的两个Route规则，仅默认渲染根路径对应的组件。
• 如果你使用HashRouter模式，访问子路由需要携带#前缀：直接访问/about无法命中规则，需访问/#/about才能匹配到AboutScreen组件。
• react-router-dom v6默认已开启路由精确匹配，无需额外添加exact参数，修正语法后规则即可正常生效。

修正后的参考代码 #

<HashRouter>
  <Routes>
    <Route path='/' element={<HomeScreen />}></Route>
    <Route path='/about' element={<AboutScreen />}></Route>
  </Routes>
</HashRouter>

内容的提问来源于stack exchange，提问作者Mathew O'Sullivan