React路由中子路由不渲染目标组件，需实现Angular模块式路由

问题现象 #

访问/home路径时正常显示Home组件，但访问/home/team路径时，仅显示Home组件，指定的App组件未渲染，需要实现类似Angular的模块化路由效果。

问题原因 #

React Router的嵌套路由要求父组件必须通过<Outlet />组件指定子路由内容的渲染位置——这和Angular中的<router-outlet>作用完全一致。你的代码里没有在Home组件中添加这个出口，导致子路由的App组件没有渲染入口。

解决步骤 #

1. 在Home组件中导入Outlet：

import { Outlet } from 'react-router-dom';

2. 在Home组件的JSX中合适位置插入<Outlet />，示例如下：

// Home组件示例代码
export function Home() {
  return (
    <div>
      <h1>Home页面</h1>
      {/* 子路由的内容会渲染到这里 */}
      <Outlet />
    </div>
  );
}

3. 保持原有路由配置不变，此时访问/home/team时，Home组件正常渲染的同时，子路由的App组件会自动填充到<Outlet />的位置。

完整可运行代码参考 #

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './main.css'
import { createBrowserRouter, RouterProvider, Outlet } from 'react-router-dom'

// 调整后的Home组件
export function Home() {
  return (
    <div>
      <h2>Home Component</h2>
      {/* 子路由出口 */}
      <Outlet />
    </div>
  )
}

const router = createBrowserRouter([
  {
    path: '/home',
    element: <Home />,
    children:[
      {
        path: "team",
        element: <App />,
        //loader: teamLoader,
      }
    ]
  },
  {
    path: '/form',
    element: <App />
  }
])

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
)

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