React Router v6始终渲染根路径"/" 其他路由不生效如何解决

出现其他路由始终匹配根路径的问题，核心原因有3个：

• 代码中错误使用了React Router v6的低阶基础组件<Router>。该组件需要手动传入history/navigator实例才能正常工作，未传入实例时路由状态初始化异常，无法响应非根路径的匹配逻辑，始终停留在初始加载的/路径。
• 代码中给<Route>添加了v5版本的exact属性，React Router v6默认已经采用路径完整精确匹配规则，exact是无效的遗留属性，虽然不会直接抛错，但属于不规范写法。
• 如果是项目打包部署后才出现该问题，是因为所用的静态Web服务没有配置SPA（单页应用）路由回退规则：服务端收到/profile、/signUp这类非根路径请求时，会去找对应路径的静态文件，找不到就默认返回根路径的index.html，导致路由初始化时始终拿到/路径的匹配结果。

1. 替换路由根组件 #

根据你需要的路由模式，将低阶的<Router>替换为官方封装好的可用高层组件：

• 推荐使用BrowserRouter（history模式，URL无#，路径更美观，需要服务端配置回退规则）
• 如果不想修改服务端配置，可使用HashRouter（hash模式，URL会带#/前缀，兼容性更好，无需服务端额外配置）

2. 移除无效属性 #

删除所有<Route>上的exact属性，v6版本不需要该配置即可实现精确匹配。

修正后的完整代码如下：

// 注意根据你选择的路由模式引入对应组件，这里以BrowserRouter为例
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function AppRouter({ isLoggedIn, user }) {
  return(
    <Router>
      <Routes>
        <Route path="/profile" element={<Profile />} />
        <Route path="/signUp" element={<SignUp />} />
        {isLoggedIn
          ? <Route path="/" element={<Home user={user}/>} />
          : <Route path="/" element={<SignIn />} />
        }
      </Routes>
    </Router>
  )
}

3. 部署场景补充配置 #

如果你使用BrowserRouter，打包后部署时需要给静态服务配置SPA回退规则，常见场景配置如下：

• 本地测试build产物：使用serve的单页模式启动，执行命令npx serve -s build，-s参数会自动开启所有路径回退到index.html的规则
• Nginx部署：在对应的站点配置中添加路由回退规则

location / {
  # 其余原有配置保留，新增下面这行
  try_files $uri $uri/ /index.html;
}

• 部署到Vercel、Netlify这类托管平台：在项目public目录下添加对应平台的SPA路由重写配置文件即可，平台会自动识别处理。

内容的提问来源于stack exchange，提问作者부건혁