React Router仅加载根路径/ 无法加载其他路径问题排查求助

排查优先级从高到低： #

1. 检查react-router-dom版本匹配问题 #

这是新手最常遇到的问题：你当前的代码是react-router-dom v5的写法，如果安装的是v6版本会直接出现非根路由白屏的问题。
执行以下命令查看版本：

npm list react-router-dom

如果输出版本为6.x.x，两种解决方案：

• 方案1：降级到v5稳定版，执行命令后重启项目即可

npm install react-router-dom@5.3.4

• 方案2：将代码改为v6兼容写法，修改后的核心代码参考：

// App.js 修改导入
import {Navigate, Route, Routes } from 'react-router-dom';

// 路由部分改写
let routes = (
  <Routes>
    <Route path='/auth' element={<Auth />} />
    <Route path= "/" element={<Home />}/>
    <Route path='*' element={<Navigate to="/"/>} />
  </Routes>
);

if(authenticated){
  routes = (
    <Routes>
      <Route path= '/about' element={<About />}/>
      <Route path='/auth' element={<Auth />} />
      <Route path= '/' element={<Home />}/>
      <Route path='*' element={<Navigate to="/"/>} />
    </Routes>
  )
}

2. 检查开发/部署服务的路由回退配置 #

如果点击<Link>组件跳转路由正常，直接刷新非根路径页面白屏，属于服务端配置问题：

• 开发环境如果是create-react-app创建的项目，在package.json中新增配置"homepage": "."
• 自行配置webpack的项目，在devServer配置中新增historyApiFallback: true
• 生产环境部署时需要配置Nginx等服务，将所有请求重定向到index.html文件

3. 检查AuthContext初始值 #

确认创建AuthContext时的默认值、Provider传递的初始值符合预期，避免authenticated取值为undefined导致路由逻辑判断异常：

// 示例：auth-context.js 中创建context的正确写法
const AuthContext = createContext({
  auth: false,
  // 其他方法...
});

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