react-router@6 中outlet标签的用法

疲惫不堪

　　最近刚刚学了react-router@6，分享一下outlet的用法。

　　今天看到一段话是这样描述outlet的。说的是嵌套路由，可以保证子路由共享父路由的界面而不会覆盖。为此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起了一个占位的作用

 1 import path from 'path'
 2 import { Button } from 'antd'
 3 import React, { Fragment } from 'react'
 4 import { NavLink,Outlet } from "react-router-dom"
 5 export default function User() {
 6   return (
 7     <Fragment>
 8          <div>
 9          <Button type="primary"><NavLink to={"/User/User1"}> 去1</NavLink></Button>
10          <Button type="ghost"> <NavLink to={"/User/User2"}>去2</NavLink></Button>
11          </div>
12          <div>
13                 <Outlet></Outlet>
14          </div>
15     </Fragment>
16    
17   )
18 }

实际效果：

 

来源：https://www.cnblogs.com/wuyz-harder/p/16418410.html