React App根路径后路由组件无法渲染问题求助

常见问题及修复方案 #

1. React Router版本写法不兼容 #

如果使用的是React Router v6，嵌套路由的规则和旧版差异很大，必须按v6规范编写：

• 用<Routes>替代旧版的<Switch>
• 父路由组件中必须通过<Outlet>标签承载子路由内容
• 子路由的path需写相对路径（不需要带开头的/，根路由除外）

示例正确写法：

// App.js
import { Routes, Route, Outlet } from 'react-router-dom';
import Public from './components/Public';
import Login from './components/Login';
import Home from './components/Home';
import DashLayout from './components/DashLayout';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Public />} />
      <Route path="/login" element={<Login />} />
      {/* 嵌套路由父容器 */}
      <Route path="/dashboard" element={<DashLayout />}>
        {/* 子路由为相对路径，对应/dashboard/home */}
        <Route path="home" element={<Home />} />
      </Route>
    </Routes>
  );
}

export default App;

同时在DashLayout.js中必须添加<Outlet>：

// DashLayout.js
import { Outlet } from 'react-router-dom';

function DashLayout() {
  return (
    <div className="dash-layout">
      <aside>侧边栏导航</aside>
      {/* 子路由组件将渲染在此位置 */}
      <Outlet />
    </div>
  );
}

export default DashLayout;

2. 路由路径拼写错误 #

• 核对浏览器地址栏路径与Route组件中path的一致性（严格区分大小写，比如/Home和/home是两个不同路径）
• 嵌套路由的子路径需正确拼接，比如父路由为/dashboard，子路由写home对应/dashboard/home，不要误写为/home

3. 组件导入或导出错误 #

• 检查组件导入路径是否存在拼写错误
• 确认组件文件的导出方式（export default或命名导出）与导入方式匹配

4. 根组件未包裹路由容器 #

必须在index.js中将App组件包裹在<BrowserRouter>（或HashRouter）内，这是路由生效的基础：

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

5. 路由匹配优先级问题 #

React Router v6中<Routes>会自动匹配最精确路径，但如果有通配路由（比如path="*"），必须放在所有路由的最后，避免拦截正常路由：

<Routes>
  {/* 其他路由 */}
  <Route path="*" element={<NotFound />} />
</Routes>

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