React Router嵌套路由失效求助：访问子路由不显示对应组件

你的问题出在React Router v6的嵌套路由规则：父路由组件必须渲染<Outlet />组件，用来承载子路由的内容。你的<CallTreeList />里没有这个，导致访问/callTree/new时，子路由的<AddCallTree />没有地方渲染，只能看到父组件的内容。

解决步骤： #

1. 在CallTreeList组件中导入并添加<Outlet />
   修改你的CallTreeList.jsx文件：

import React from 'react';
// 导入Outlet
import { Outlet } from 'react-router-dom';

export default function CallTreeList() {
  return (
    <div>
      {/* 这里保留CallTreeList原本的内容 */}
      <h1>Call Tree列表页</h1>
      {/* 添加Outlet，子路由组件会在这里渲染 */}
      <Outlet />
    </div>
  );
}

2. 保留原App组件的路由结构不变
   你的App组件里的嵌套路由写法是对的，不需要修改：

import './App.css';
import React from 'react';
import AddCallTree from './components/callTree/AddCallTree';
import CallTreeList from './components/callTree/CallTreeList';
import Home from "./components/Home";
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/callTree' element={<CallTreeList />}>
          <Route path='new' element={<AddCallTree />} />
        </Route>
      </Routes>
    </Router>
  );
}

现在访问http://localhost:3000/callTree/new时，<AddCallTree />就会渲染在<CallTreeList />的<Outlet />位置，嵌套路由就能正常工作了。

补充说明： #

如果你的需求是访问/callTree/new时只显示AddCallTree，不显示CallTreeList，那这不属于嵌套路由场景，应该把两个路由写成同级，用绝对路径：

<Routes>
  <Route path='/' element={<Home />} />
  <Route path='/callTree' element={<CallTreeList />} />
  <Route path='/callTree/new' element={<AddCallTree />} />
</Routes>

但根据你的代码结构，你要的是嵌套展示，所以第一种方法才是正确的。

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