react-router@6 中outlet标签的用法
<p> 最近刚刚学了react-router@6，分享一下outlet的用法。</p><p> 今天看到一段话是这样描述outlet的。说的是嵌套路由，可以保证子路由共享父路由的界面而不会覆盖。为此React提供了Outlet组件，将其用于父组件中可以为子路由的元素占位，并最终渲染子路由的元素。</p>
<p> 这句话的意思大概就是说outlet是应用于嵌套路由的占位的。PS：如果是一级路由的话，我个人的理解还是要用Routes跟Route搭配的</p>
<p> 话不多说，上代码。这部分是路由列表的一个实例，"/User"下面有两个子路由</p>
<p> </p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">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;
</pre>
</div>
<p> 再来看看User组件，通过这个组件，有两个NAVLINK可以跳转到子路由，并且Outlet起了一个占位的作用</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 128, 1)"> 1</span> import path from 'path'
<span style="color: rgba(0, 128, 128, 1)"> 2</span> import { Button } from 'antd'
<span style="color: rgba(0, 128, 128, 1)"> 3</span> import React, { Fragment } from 'react'
<span style="color: rgba(0, 128, 128, 1)"> 4</span> import { NavLink,Outlet } from "react-router-dom"
<span style="color: rgba(0, 128, 128, 1)"> 5</span> export <span style="color: rgba(0, 0, 255, 1)">default</span> <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> User() {
</span><span style="color: rgba(0, 128, 128, 1)"> 6</span> <span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
</span><span style="color: rgba(0, 128, 128, 1)"> 7</span> <Fragment>
<span style="color: rgba(0, 128, 128, 1)"> 8</span> <div>
<span style="color: rgba(0, 128, 128, 1)"> 9</span> <Button type="primary"><NavLink to={"/User/User1"}> 去1</NavLink></Button>
<span style="color: rgba(0, 128, 128, 1)">10</span> <Button type="ghost"> <NavLink to={"/User/User2"}>去2</NavLink></Button>
<span style="color: rgba(0, 128, 128, 1)">11</span> </div>
<span style="color: rgba(0, 128, 128, 1)">12</span> <div>
<span style="color: rgba(0, 128, 128, 1)">13</span> <Outlet></Outlet>
<span style="color: rgba(0, 128, 128, 1)">14</span> </div>
<span style="color: rgba(0, 128, 128, 1)">15</span> </Fragment>
<span style="color: rgba(0, 128, 128, 1)">16</span>
<span style="color: rgba(0, 128, 128, 1)">17</span> <span style="color: rgba(0, 0, 0, 1)">)
</span><span style="color: rgba(0, 128, 128, 1)">18</span> }</pre>
</div>
<p>实际效果：</p>
<p><img src="https://img2022.cnblogs.com/blog/2514193/202206/2514193-20220628094257595-2099618448.png"></p>
<p> </p><br><br>
来源：https://www.cnblogs.com/wuyz-harder/p/16418410.html
頁:
[1]