React路由全部提示“No routes matched location”问题求助

你的问题出在路由嵌套的匹配规则上：

index.js中，外层的<Route path="/" element={<App />} />仅会精确匹配根路径/。当你访问/home、/login这类子路径时，外层Routes找不到对应的路由规则，直接触发App内的通配符路由<Route path='*' element={<Home />} />，导致所有非根路径都跳转到Home页面。

解决方法（二选一即可） #

方法1：修改外层路由的匹配规则 #

将index.js中的外层路由路径改为/*，允许匹配所有以/开头的子路径：

<BrowserRouter >
  <Routes>
    <Route path="/*" element={<App />} />
  </Routes>
</BrowserRouter >

这样外层路由会承接所有路径请求，App内的路由规则就能正常匹配对应的路径了。

方法2：将App内的路由改为相对路径 #

去掉App.tsx中所有路由路径开头的/，让路径相对于父路由的/：

<Routes >       
  <Route path='home' element={<Home />} />    
  <Route path='login' element={<Login />} />
  <Route path='register' element={<Register />} />    
  <Route path='terms-of-service' element={<TermsOfService />} />
  <Route path='privacy-policy' element={<PrivacyPolicy />} />    
  <Route path='*' element={<Home />} />
</Routes >

此时访问/home时，会匹配到App内的home路径规则，正确渲染对应组件。

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