React嵌套路由Outlet组件

一、概念

        在 React 18 中，Outlet 是由 React Router（通常是 react-router-dom）提供的组件，用于在嵌套路由中渲染子路由的内容。它是 React Router v6 及以上版本中实现嵌套路由的核心组件。

二、Outlet 的作用

    Outlet 充当子路由的占位符，告诉 React Router 在父路由的组件中子路由的组件应该被渲染。换句话说，它是父路由布局中用来动态插入子路由内容的地方。

三、使用场景

• 嵌套路由：当你需要在父路由的布局中保留一些固定内容（比如导航栏、侧边栏），同时动态渲染子路由的内容时，Outlet 非常有用。
• 布局路由：Outlet 常用于创建共享布局，子路由的内容会根据当前 URL 动态填充到 Outlet 的位置。

四、示例代码

示例一：

import { Routes, Route, Outlet, Link } from 'react-router-dom';

// 父路由组件（包含布局）
function Layout() {
  return (
    <div>
      <nav>
        <Link to="/home">Home</Link> | <Link to="/about">About</Link>
      </nav>
      <hr />
      {/* 子路由的内容会在这里渲染 */}
      <Outlet />
    </div>
  );
}

// 子路由组件
function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

// 路由配置
function App() {
  return (
    <Routes>
      <Route element={<Layout />}>
        <Route path="/home" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Route>
    </Routes>
  );
}

export default App;

示例二：

        嵌套路由时，为了可以保证子路由共享父路由的界面而不会覆盖，React提供了Outlet组件，将其用于父组件中可以为子路由的元素占位，并最终渲染子路由的元素。

　　这句话的意思大概就是说outlet是应用于嵌套路由的占位的。PS：如果是一级路由的话，我个人的理解还是要用Routes跟Route搭配的

　　话不多说，上代码。这部分是路由列表的一个实例，"/User"下面有两个子路由

const route = [
    {
        path:"/User",
        element:<User />,
        children:[
            {
                path:"User1",
                element:<User1 />
            },
            {
                path:"User2",
                element:<User2 />
            }
    ]
    },
    {
        path:"/Tags",
        element:<Tags />
    },
    {
        path:"/",
        element:<Navigate to="/Tags" />
    },
]
 
export default route;

再来看看User组件，通过这个组件，有两个NAVLINK可以跳转到子路由，并且Outlet起了一个占位的作用

import path from 'path'
import { Button } from 'antd'
import React, { Fragment } from 'react'
import { NavLink,Outlet } from "react-router-dom"
export default function User() {
  return (
    <Fragment>
         <div>
         <Button type="primary"><NavLink to={"/User/User1"}> 去1</NavLink></Button>
         <Button type="ghost"> <NavLink to={"/User/User2"}>去2</NavLink></Button>
         </div>
         <div>
                <Outlet></Outlet>
         </div>
    </Fragment>

  )
}

实际效果图：

五、工作原理

1. 路由配置：在 Routes 中，父路由的 element 设置为 Layout 组件，子路由（如 /home 和 /about）嵌套在父路由中。
2. Outlet 渲染：当 URL 匹配到子路由（比如 /home），Outlet 会渲染对应的子路由组件（Home）。如果 URL 匹配到 /about，Outlet 渲染 About 组件。
3. 布局保留：Layout 组件中的导航栏等内容始终保留，只有 Outlet 的内容会根据子路由动态变化。

六、注意事项

• React Router v6 专属：Outlet 是 React Router v6 引入的，v5 及以下版本没有这个组件。
• 必须在父路由中使用：Outlet 只有在嵌套路由的上下文中才会生效，直接在非路由组件中使用不会渲染任何内容。
• 动态上下文：可以通过 useOutletContext 钩子在父路由中向子路由传递数据。例如：

// 父路由
function Layout() {
  const value = "Hello from parent";
  return (
    <div>
      <Outlet context={{ value }} />
    </div>
  );
}

// 子路由
function Child() {
  const { value } = useOutletContext();
  return <p>{value}</p>;
}

七、总结

    Outlet 是 React Router v6 中用于嵌套路由渲染的核心组件，简化了布局和子路由内容的动态管理。它让开发者能够轻松实现共享布局，同时保持子路由的灵活性。通过结合 useOutletContext，还可以实现父子路由间的数据传递，非常适合构建复杂的单页应用（SPA）。