最近刚刚学了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 }
实际效果: