React Router嵌套路由默认路由不生效问题求助

核心问题 #

你的AppLayout组件里缺少React Router的<Outlet />组件——这是嵌套路由的核心依赖，所有子路由（包括你配置的<Navigate>跳转组件）都需要通过<Outlet />才能被渲染到页面上。现在访问/app时，只会渲染AppLayout里的CityList和CountryList，负责跳转的<Navigate>根本没机会执行。

另外，你还需要处理/app下未匹配的子路径（比如/app/xxx这类无效路径），当前配置里没有覆盖这种场景。

解决步骤 #

1. 给AppLayout添加Outlet组件

从react-router-dom导入Outlet，并将它放在AppLayout中需要展示子路由内容的位置：

import { Outlet } from "react-router-dom"; // 新增导入
import CityList from "../components/CityList"
import CountryList from "../components/CountryList"

const AppLayout = () => {
  return (
    <div>
      {/* 可保留你的布局/导航元素 */}
      <CityList />
      <CountryList />
      {/* 子路由内容会在这里渲染 */}
      <Outlet />
    </div>
  )
}

export default AppLayout

2. 完善嵌套路由配置

在/app的子路由中添加通配符路由，处理所有未匹配的子路径：

import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
import AppLayout from "./pages/AppLayout";
import Home from "./pages/Home";
import Pricing from "./pages/Pricing";
import Product from "./pages/Product";
import CityList from "./components/CityList";
import SingleCity from "./components/SingleCity";
import CountryList from "./components/CountryList";
import Form from "./components/Form";

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="pricing" element={<Pricing />} />
        <Route path="product" element={<Product />} />
        <Route path="app" element={<AppLayout />}>
          {/* 访问/app时自动跳转到/app/cities */}
          <Route index element={<Navigate to="cities" replace />} />
          <Route path="cities" element={<CityList />} />
          <Route path="cities/:id" element={<SingleCity />} />
          <Route path="countries" element={<CountryList />} />
          <Route path="form" element={<Form />} />
          {/* 匹配/app下所有未定义的子路径，统一跳转 */}
          <Route path="*" element={<Navigate to="cities" replace />} />
        </Route>
      </Routes>
    </Router>
  );
};

export default App;

关键说明 #

• <Outlet />是嵌套路由的“渲染出口”，父路由下的所有子路由元素必须通过它才能挂载到页面，没有它的话，你的跳转逻辑永远不会触发。
• path="*"是通配符路由，会捕获所有未被前面路由匹配的子路径，确保无效路径也能跳转到目标页面。
• replace属性会替换当前路由历史记录，避免用户点击返回按钮时回到空的/app页面，提升体验。

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