添加额外路由导致React Router Dom首页路由失效问题求助

你的代码本身符合React Router v6的多路由配置规范，出现首页/路由失效的情况，可从以下几个方向排查解决：

1. 排查组件自身问题 #

先排除Home/AddProduct组件的渲染异常：

• 临时将组件内容替换为极简结构，比如：

// Home.jsx
export default function Home() {
  return <h1>首页</h1>;
}

如果替换后首页能正常显示，说明原组件存在语法错误、异步请求失败或其他渲染阻塞问题。

2. 确认React Router Dom版本 #

React Router v6和v5的路由API差异极大，确保你使用的是v6版本：

• 执行命令查看当前版本：

npm list react-router-dom

如果是v5版本，要么升级到v6（推荐），要么将Routes替换为Switch，并调整路由写法：

// v5写法示例
import { BrowserRouter, Switch, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Navbar />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/add-product" component={AddProduct} />
      </Switch>
    </BrowserRouter>
  );
}

3. 修复开发环境路由 fallback 配置（Create React App场景） #

使用BrowserRouter时，若项目基于Create React App创建，需确保路由 fallback 配置正确：

• 在package.json中添加"homepage": "."，避免路由路径解析错误；
• 确认public/index.html中的<base href="%PUBLIC_URL%/">配置存在且正确。

4. 检查路由匹配逻辑 #

React Router v6的Routes组件会按顺序进行精确匹配，你的配置中path="/"是精确匹配，不会被后续路由覆盖，因此无需担心优先级问题。但如果后续添加嵌套路由，需注意使用element={<Outlet />}实现子路由渲染。

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