目录
React6路由
React Router6在2021年的11月份成为默认版本，其以三个不同的包发布到 npm 上，如下：
react-router：路由的核心库，提供了很多的组件和钩子。
react-router-dom：包含react-router所有内容，并添加一些专门用于DOM的组件，例如<BrowserRouter>等。
react-router-native：包括react-router所有内容，并添加一些专门用于ReactNative的API，例如：<NativeRouter>等。
和React Router5相比发生了如下改变，想了解React Router5请参考文章：React Router5文章 。
内置组件的变化：移除<Switch />，新增<Routes />等。
语法的变化：component={About} 变为 element={<About />}等。
新增多个hook：useParams、useNavigate、useMatch等。
官方推荐使用函数式组件。
react-router-dom的安装与使用
由于react-router-dom在2021年11月份升级到了6版本，所以我们直接选择默认安装下载最新版本
npm install react-router-dom安装完成之后，就可以使用路由了，在入口文件直接使用BrowserRouter将根组件包裹，如下：
和React Router5不同，Switch用Routes替代，引入组件使用 element 包裹组件标签，如下：
import React from 'react'
import {NavLink,Routes,Route} from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'
export default function App() {
return (
<div>
<div className='row ml-2'>
<div className="col-xs-offset-2 col-xs-8">
<div className='page-header'><h2>React Router Demo</h2></div>
</div>
</div>
<div className='row ml-2'>
<div className=" col-xs-2 col-xs-offset-2">
<div className="list-group">
{/* 导航区 */}
<NavLink className="list-group-item" to="/home">Home</NavLink>
<NavLink className="list-group-item" to="/about">About</NavLink>
</div>
</div>
<div className="col-xs-6">
<div className="panel">
<div className="pandel-body">
{/* 展示区 */}
<Routes>
<Route path="/home" element={<Home/>} />
<Route path="/about" element={<About/>} />
</Routes>
</div>
</div>
</div>
</div>
</div>
)
}
补充：
<Routes>和<Route>要配合使用，且必须要用<Routes>包裹<Route> .
<Route>相当于一个if语句，如果其路径与当前URL匹配，则呈现其对应的组件。
<Route caseSensitive>属性用于指定：匹配时是否区分大小写(默认为false)。
当URL发生变化时，<Routes>都会查看其所有子<Route>元素以找到最佳匹配并呈现组件。
在引入的Home组件和About组件中各自书写一些内容就可以实现路由的切换了，如下：
Navigate实现路由重定向
在React Router6中将以前的5版本的 Redirect 废除改为 Navigate 实现路由重定向，其使用方法如下：
注意：Navigate只要被渲染就会引起视图的切换，案例如下：
import React, { useState } from 'react'
import {Navigate} from 'react-router-dom'
export default function Home() {
const [sum,setsum] = useState(1)
return (
<div>
<h3>我是Home组件</h3>
{
sum === 2 ? <Navigate to="/about"/> : <h4>当前的值为：{sum}</h4>
}
<button onClick={ ()=> setsum(2)}>点我值变为2</button>
</div>
)
}
NavLink的使用
与React Router5相比，在6中NavLink使用发生了一丝变化，要知道5版本中有个activeClassName属性是能更改默认的active的值的，而在6版本中直接将这个属性废除，转而直接在className中书写函数来确定样式，如下：
来打印一下，看看NavLink中传递的函数参数分别是什么：
给出的参数如下，isActive：判断当前是否是默认类名active的状态(常用)，isPending：告诉您当前是否有一些状态更新仍处于待处理状态(少用)
根据现在NavLink的变化，我们直接在函数式组件中再书写一个处理NavLink样式的组件，如下：
给自己设置的类名添加样式，这里我们直接将样式写在index.html中，加上!important设置优先级最高避免样式冲突：
useRoutes路由表的使用
在React Router6中给我们提供了有个书写路由表的API，当然在5中也能书写路由表但是需要第三方插件的配合，而在6中直接使用提供的useRoutes路由表API就能实现：
导入useRoutes，书写的路由文件作为参数传入即可：
书写routes路由表文件，并将其暴露出去：
import {Navigate} from 'react-router-dom'
import Home from '../pages/Home'
import About from '../pages/About'
const routes=[
{
path:'/home',
element:<Home/>
},
{
path:'/about',
element:<About/>
},
{
path:'/',
element:<Navigate to="/home"/> // 路由重定向
}
]
export default routes书写完路由表并传入之后，将useRoutes赋值一个常量 element ，在相关位置进行展示即可。
如下，也能达到相同效果，区别无非是将所有书写路由的位置都集成在一个文件，便于管理：
嵌套路由
在React Router6版本中嵌套路由也新增了一个API，Outlet用于展示子级路由，搭配路由表能够特别轻松的实现效果：
注册子级组件，并在路由表中进行注册：
在子级路由组件的父级组件中书写子级路由组件的路由链接，并通过Outlet这个API呈现：
import React from 'react'
import { NavLink,Outlet } from 'react-router-dom'
export default function About() {
return (
<div>
<h2>我是Home内容</h2>
<div>
<ul className='nav nav-tabs'>
<li>
<NavLink className="list-group-item" to='/about/news'>News</NavLink>
</li>
<li>
{/* 在6版本中，to的路径可以直接简写，书写子级路由的路径名称即可 */}
<NavLink className="list-group-item" to='message'>Message</NavLink>
</li>
</ul>
</div>
{/* 注册路由——展示区 */}
<Outlet />
</div>
)
}如果想要激活状态只呈现在子路由上，可以在父级路由的路由链接上添加一个 end 属性：
路由懒加载
懒加载也叫延迟加载,即在需要的时候进行加载,随用随载。因为React是单页面应用，webpake打包后文件会很大所以启动的时候打开首页资源过多可能会出现路由懒加载，接下来讲解路由懒加载的使用。
用到路由懒加载的组件是因为该组件的资源太多，请求数据有点缓慢的时候就使用路由懒加载，这里我就以当前的例子，给Home组件使用路由懒加载。
使用路由懒加载需要导入 Lazy ，导入组件的方式也要改变一下，这里我就在路由表中进行修改了
由于使用路由表，在使用useRoutes这个API后，页面直接{element}展示即可，但是这里有个小坑，需要我们对要展示的路由组件{element}外层包裹一层组件Suspense，组件的意思是表示悬而未决的，说明设置路由懒加载的组件有个Londing效果，代码如下:
import React,{Suspense} from 'react'
import {NavLink,useRoutes} from 'react-router-dom'
import routes from './routes'
import Demo from './pages/Demo'
export default function App() {
// 根据路由表生成对应的路由规则
const element = useRoutes(routes)
return (
<div>
<div className='row ml-2'>
<div className="col-xs-offset-2 col-xs-8">
<div className='page-header'><h2>React Router Demo</h2></div>
</div>
</div>
<div className='row ml-2'>
<div className=" col-xs-2 col-xs-offset-2">
<div className="list-group">
{/* 导航区 */}
<NavLink className="list-group-item" to="/home">Home</NavLink>
<NavLink className="list-group-item" end to="/about">About</NavLink>
</div>
</div>
<div className="col-xs-6">
<div className="panel">
<div className="pandel-body">
{/* 展示区 */}
{/* Suspense组件需要fallback传入一个组件或者HTML标签来进行懒加载效果的应急 */}
<Suspense fallback={<Demo />}>
{element}
</Suspense>
</div>
</div>
</div>
</div>
</div>
)
}为了实现路由懒加载的效果，这里我封装了一个Demo组件，里面借用了一个专门书写按钮与懒加载等效果的网站，如下，我将当前懒加载的效果文件放置到我的Demo组件当中。
Demo组件的index.jsx文件：
import React from 'react'
import './index.css'
export default function Demo() {
return (
<div class="svg-frame">
<svg style={{"--i":0,"--j":0}}>
<g id="out1">
<path d="M72 172C72 116.772 116.772 72 172 72C227.228 72 272 116.772 272 172C272 227.228 227.228 272 172 272C116.772 272 72 227.228 72 172ZM197.322 172C197.322 158.015 185.985 146.678 172 146.678C158.015 146.678 146.678 158.015 146.678 172C146.678 185.985 158.015 197.322 172 197.322C185.985 197.322 197.322 185.985 197.322 172Z"></path>
<path mask="url(#path-1-inside-1_111_3212)" stroke-miterlimit="16" stroke-width="2" stroke="#00FFFF" d="M72 172C72 116.772 116.772 72 172 72C227.228 72 272 116.772 272 172C272 227.228 227.228 272 172 272C116.772 272 72 227.228 72 172ZM197.322 172C197.322 158.015 185.985 146.678 172 146.678C158.015 146.678 146.678 158.015 146.678 172C146.678 185.985 158.015 197.322 172 197.322C185.985 197.322 197.322 185.985 197.322 172Z"></path>
</g>
</svg>
<svg style={{"--i":1,"--j":1}}>
<g id="out2">
<mask fill="white" id="path-2-inside-2_111_3212">
<path d="M102.892 127.966C93.3733 142.905 88.9517 160.527 90.2897 178.19L94.3752 177.88C93.1041 161.1 97.3046 144.36 106.347 130.168L102.892 127.966Z"></path>
<path d="M93.3401 194.968C98.3049 211.971 108.646 226.908 122.814 237.541L125.273 234.264C111.814 224.163 101.99 209.973 97.2731 193.819L93.3401 194.968Z"></path>
<path d="M152.707 92.3592C140.33 95.3575 128.822 101.199 119.097 109.421L121.742 112.55C130.981 104.739 141.914 99.1897 153.672 96.3413L152.707 92.3592Z"></path>
<path d="M253.294 161.699C255.099 175.937 253.132 190.4 247.59 203.639L243.811 202.057C249.075 189.48 250.944 175.74 249.23 162.214L253.294 161.699Z"></path>
<path d="M172 90.0557C184.677 90.0557 197.18 92.9967 208.528 98.6474C219.875 104.298 229.757 112.505 237.396 122.621L234.126 125.09C226.869 115.479 217.481 107.683 206.701 102.315C195.921 96.9469 184.043 94.1529 172 94.1529V90.0557Z"></path>
<path d="M244.195 133.235C246.991 138.442 249.216 143.937 250.83 149.623L246.888 150.742C245.355 145.34 243.242 140.12 240.586 135.174L244.195 133.235Z"></path>
<path d="M234.238 225.304C223.932 237.338 210.358 246.126 195.159 250.604C179.961 255.082 163.79 255.058 148.606 250.534L149.775 246.607C164.201 250.905 179.563 250.928 194.001 246.674C208.44 242.42 221.335 234.071 231.126 222.639L234.238 225.304Z"></path>
</mask>
<path mask="url(#path-2-inside-2_111_3212)" fill="#00FFFF" d="M102.892 127.966L105.579 123.75L101.362 121.063L98.6752 125.28L102.892 127.966ZM90.2897 178.19L85.304 178.567L85.6817 183.553L90.6674 183.175L90.2897 178.19ZM94.3752 177.88L94.7529 182.866L99.7386 182.488L99.3609 177.503L94.3752 177.88ZM106.347 130.168L110.564 132.855L113.251 128.638L109.034 125.951L106.347 130.168ZM93.3401 194.968L91.9387 190.168L87.1391 191.569L88.5405 196.369L93.3401 194.968ZM122.814 237.541L119.813 241.54L123.812 244.541L126.813 240.542L122.814 237.541ZM125.273 234.264L129.272 237.265L132.273 233.266L128.274 230.265L125.273 234.264ZM97.2731 193.819L102.073 192.418L100.671 187.618L95.8717 189.02L97.2731 193.819ZM152.707 92.3592L157.567 91.182L156.389 86.3226L151.53 87.4998L152.707 92.3592ZM119.097 109.421L115.869 105.603L112.05 108.831L115.278 112.649L119.097 109.421ZM121.742 112.55L117.924 115.778L121.152 119.596L124.97 116.368L121.742 112.55ZM153.672 96.3413L154.849 101.201L159.708 100.023L158.531 95.1641L153.672 96.3413ZM253.294 161.699L258.255 161.07L257.626 156.11L252.666 156.738L253.294 161.699ZM247.59 203.639L245.66 208.251L250.272 210.182L252.203 205.569L247.59 203.639ZM243.811 202.057L239.198 200.126L237.268 204.739L241.88 206.669L243.811 202.057ZM249.23 162.214L248.601 157.253L243.641 157.882L244.269 162.842L249.23 162.214ZM172 90.0557V85.0557H167V90.0557H172ZM208.528 98.6474L206.299 103.123L206.299 103.123L208.528 98.6474ZM237.396 122.621L240.409 126.611L244.399 123.598L241.386 119.608L237.396 122.621ZM234.126 125.09L230.136 128.103L233.149 132.093L237.139 129.08L234.126 125.09ZM206.701 102.315L204.473 106.791L204.473 106.791L206.701 102.315ZM172 94.1529H167V99.1529H172V94.1529ZM244.195 133.235L248.601 130.87L246.235 126.465L241.83 128.83L244.195 133.235ZM250.83 149.623L252.195 154.433L257.005 153.067L255.64 148.257L250.83 149.623ZM246.888 150.742L242.078 152.107L243.444 156.917L248.254 155.552L246.888 150.742ZM240.586 135.174L238.22 130.768L233.815 133.134L236.181 137.539L240.586 135.174ZM234.238 225.304L238.036 228.556L241.288 224.759L237.491 221.506L234.238 225.304ZM195.159 250.604L196.572 255.4L196.572 255.4L195.159 250.604ZM148.606 250.534L143.814 249.107L142.386 253.899L147.178 255.326L148.606 250.534ZM149.775 246.607L151.203 241.816L146.411 240.388L144.983 245.18L149.775 246.607ZM194.001 246.674L195.415 251.47L195.415 251.47L194.001 246.674ZM231.126 222.639L234.379 218.841L230.581 215.589L227.329 219.386L231.126 222.639ZM98.6752 125.28C88.5757 141.13 83.8844 159.826 85.304 178.567L95.2754 177.812C94.0191 161.227 98.1709 144.681 107.109 130.653L98.6752 125.28ZM90.6674 183.175L94.7529 182.866L93.9976 172.895L89.912 173.204L90.6674 183.175ZM99.3609 177.503C98.1715 161.8 102.102 146.135 110.564 132.855L102.131 127.481C92.5071 142.585 88.0368 160.4 89.3895 178.258L99.3609 177.503ZM109.034 125.951L105.579 123.75L100.205 132.183L103.661 134.385L109.034 125.951ZM88.5405 196.369C93.8083 214.41 104.78 230.259 119.813 241.54L125.815 233.542C112.512 223.558 102.802 209.532 98.1397 193.566L88.5405 196.369ZM126.813 240.542L129.272 237.265L121.274 231.263L118.815 234.54L126.813 240.542ZM128.274 230.265C115.679 220.813 106.486 207.534 102.073 192.418L92.4735 195.221C97.493 212.412 107.948 227.513 122.272 238.263L128.274 230.265ZM95.8717 189.02L91.9387 190.168L94.7415 199.767L98.6745 198.619L95.8717 189.02ZM151.53 87.4998C138.398 90.681 126.188 96.8793 115.869 105.603L122.325 113.239C131.457 105.519 142.262 100.034 153.884 97.2187L151.53 87.4998ZM115.278 112.649L117.924 115.778L125.56 109.322L122.915 106.193L115.278 112.649ZM124.97 116.368C133.616 109.059 143.846 103.866 154.849 101.201L152.495 91.4818C139.981 94.5132 128.347 100.419 118.514 108.732L124.97 116.368ZM158.531 95.1641L157.567 91.182L147.848 93.5364L148.812 97.5185L158.531 95.1641ZM248.334 162.327C250.028 175.697 248.181 189.277 242.978 201.708L252.203 205.569C258.082 191.522 260.169 176.177 258.255 161.07L248.334 162.327ZM249.521 199.027L245.741 197.445L241.88 206.669L245.66 208.251L249.521 199.027ZM248.423 203.987C254.025 190.602 256.014 175.98 254.19 161.585L244.269 162.842C245.873 175.5 244.125 188.357 239.198 200.126L248.423 203.987ZM249.858 167.174L253.923 166.659L252.666 156.738L248.601 157.253L249.858 167.174ZM172 95.0557C183.903 95.0557 195.644 97.8172 206.299 103.123L210.757 94.1717C198.717 88.1761 185.45 85.0557 172 85.0557V95.0557ZM206.299 103.123C216.954 108.429 226.233 116.135 233.406 125.634L241.386 119.608C233.281 108.874 222.796 100.167 210.757 94.1717L206.299 103.123ZM234.383 118.631L231.113 121.1L237.139 129.08L240.409 126.611L234.383 118.631ZM238.116 122.077C230.393 111.849 220.403 103.552 208.93 97.8393L204.473 106.791C214.56 111.814 223.345 119.11 230.136 128.103L238.116 122.077ZM208.93 97.8393C197.458 92.1263 184.816 89.1529 172 89.1529V99.1529C183.269 99.1529 194.385 101.767 204.473 106.791L208.93 97.8393ZM177 94.1529V90.0557H167V94.1529H177ZM239.79 135.601C242.416 140.49 244.504 145.649 246.02 150.988L255.64 148.257C253.927 142.225 251.567 136.395 248.601 130.87L239.79 135.601ZM249.464 144.813L245.523 145.932L248.254 155.552L252.195 154.433L249.464 144.813ZM251.698 149.376C250.067 143.628 247.818 138.073 244.991 132.808L236.181 137.539C238.666 142.168 240.644 147.052 242.078 152.107L251.698 149.376ZM242.951 139.579L246.561 137.64L241.83 128.83L238.22 130.768L242.951 139.579ZM230.441 222.051C220.763 233.351 208.017 241.603 193.746 245.808L196.572 255.4C212.698 250.649 227.101 241.325 238.036 228.556L230.441 222.051ZM193.746 245.808C179.475 250.012 164.291 249.99 150.033 245.742L147.178 255.326C163.289 260.125 180.447 260.151 196.572 255.4L193.746 245.808ZM153.397 251.962L154.567 248.035L144.983 245.18L143.814 249.107L153.397 251.962ZM148.348 251.399C163.7 255.973 180.049 255.997 195.415 251.47L192.588 241.877C179.077 245.858 164.702 245.837 151.203 241.816L148.348 251.399ZM195.415 251.47C210.78 246.942 224.504 238.058 234.924 225.891L227.329 219.386C218.167 230.084 206.099 237.897 192.588 241.877L195.415 251.47ZM227.874 226.436L230.986 229.101L237.491 221.506L234.379 218.841L227.874 226.436Z"></path>
</g>
</svg>
<svg style={{"--i":0,"--j":2}}>
<g id="inner3">
<path d="M195.136 135.689C188.115 131.215 179.948 128.873 171.624 128.946C163.299 129.019 155.174 131.503 148.232 136.099L148.42 136.382C155.307 131.823 163.368 129.358 171.627 129.286C179.886 129.213 187.988 131.537 194.954 135.975L195.136 135.689Z"></path>
<path d="M195.136 208.311C188.115 212.784 179.948 215.127 171.624 215.054C163.299 214.981 155.174 212.496 148.232 207.901L148.42 207.618C155.307 212.177 163.368 214.642 171.627 214.714C179.886 214.786 187.988 212.463 194.954 208.025L195.136 208.311Z"></path>
<path mask="url(#path-5-inside-3_111_3212)" fill="#00FFFF" d="M195.136 135.689L195.474 135.904L195.689 135.566L195.351 135.352L195.136 135.689ZM171.624 128.946L171.627 129.346L171.624 128.946ZM148.232 136.099L148.011 135.765L147.678 135.986L147.899 136.32L148.232 136.099ZM148.42 136.382L148.086 136.603L148.307 136.936L148.641 136.716L148.42 136.382ZM171.627 129.286L171.63 129.686L171.627 129.286ZM194.954 135.975L194.739 136.313L195.076 136.528L195.291 136.19L194.954 135.975ZM195.136 208.311L195.351 208.648L195.689 208.433L195.474 208.096L195.136 208.311ZM171.624 215.054L171.627 214.654L171.624 215.054ZM148.232 207.901L147.899 207.68L147.678 208.014L148.011 208.234L148.232 207.901ZM148.42 207.618L148.641 207.284L148.307 207.063L148.086 207.397L148.42 207.618ZM171.627 214.714L171.63 214.314L171.627 214.714ZM194.954 208.025L195.291 207.81L195.076 207.472L194.739 207.687L194.954 208.025ZM195.351 135.352C188.265 130.836 180.022 128.473 171.62 128.546L171.627 129.346C179.874 129.274 187.966 131.594 194.921 136.026L195.351 135.352ZM171.62 128.546C163.218 128.619 155.018 131.127 148.011 135.765L148.453 136.432C155.33 131.88 163.38 129.418 171.627 129.346L171.62 128.546ZM147.899 136.32L148.086 136.603L148.753 136.161L148.566 135.878L147.899 136.32ZM148.641 136.716C155.463 132.199 163.448 129.757 171.63 129.686L171.623 128.886C163.287 128.958 155.15 131.447 148.199 136.049L148.641 136.716ZM171.63 129.686C179.812 129.614 187.839 131.916 194.739 136.313L195.169 135.638C188.138 131.158 179.959 128.813 171.623 128.886L171.63 129.686ZM195.291 136.19L195.474 135.904L194.799 135.474L194.617 135.76L195.291 136.19ZM194.921 207.974C187.966 212.406 179.874 214.726 171.627 214.654L171.62 215.454C180.022 215.527 188.265 213.163 195.351 208.648L194.921 207.974ZM171.627 214.654C163.38 214.582 155.33 212.12 148.453 207.567L148.011 208.234C155.018 212.873 163.218 215.38 171.62 215.454L171.627 214.654ZM148.566 208.122L148.753 207.838L148.086 207.397L147.899 207.68L148.566 208.122ZM148.199 207.951C155.15 212.553 163.287 215.041 171.623 215.114L171.63 214.314C163.448 214.243 155.463 211.801 148.641 207.284L148.199 207.951ZM171.623 215.114C179.959 215.187 188.138 212.842 195.169 208.362L194.739 207.687C187.839 212.084 179.812 214.386 171.63 214.314L171.623 215.114ZM194.617 208.239L194.799 208.526L195.474 208.096L195.291 207.81L194.617 208.239Z"></path>
</g>
<path stroke="#00FFFF" d="M240.944 172C240.944 187.951 235.414 203.408 225.295 215.738C215.176 228.068 201.095 236.508 185.45 239.62C169.806 242.732 153.567 240.323 139.5 232.804C125.433 225.285 114.408 213.12 108.304 198.384C102.2 183.648 101.394 167.25 106.024 151.987C110.654 136.723 120.434 123.537 133.696 114.675C146.959 105.813 162.884 101.824 178.758 103.388C194.632 104.951 209.472 111.97 220.751 123.249" id="out3"></path>
</svg>
<svg style={{"--i":1,"--j":3}}>
<g id="inner1">
<path fill="#00FFFF" d="M145.949 124.51L148.554 129.259C156.575 124.859 165.672 122.804 174.806 123.331C183.94 123.858 192.741 126.944 200.203 132.236C207.665 137.529 213.488 144.815 217.004 153.261C220.521 161.707 221.59 170.972 220.09 179.997L224.108 180.665L224.102 180.699L229.537 181.607C230.521 175.715 230.594 169.708 229.753 163.795L225.628 164.381C224.987 159.867 223.775 155.429 222.005 151.179C218.097 141.795 211.628 133.699 203.337 127.818C195.045 121.937 185.266 118.508 175.118 117.923C165.302 117.357 155.525 119.474 146.83 124.037C146.535 124.192 146.241 124.349 145.949 124.51ZM224.638 164.522C224.009 160.091 222.819 155.735 221.082 151.563C217.246 142.352 210.897 134.406 202.758 128.634C194.62 122.862 185.021 119.496 175.06 118.922C165.432 118.367 155.841 120.441 147.311 124.914L148.954 127.91C156.922 123.745 165.876 121.814 174.864 122.333C184.185 122.87 193.166 126.019 200.782 131.421C208.397 136.822 214.339 144.257 217.928 152.877C221.388 161.188 222.526 170.276 221.23 179.173L224.262 179.677C224.998 174.671 225.35 169.535 224.638 164.522Z" clip-rule="evenodd" fill-rule="evenodd"></path>
<path fill="#00FFFF" d="M139.91 220.713C134.922 217.428 130.469 213.395 126.705 208.758L130.983 205.286L130.985 205.288L134.148 202.721C141.342 211.584 151.417 217.642 162.619 219.839C173.821 222.036 185.438 220.232 195.446 214.742L198.051 219.491C197.759 219.651 197.465 219.809 197.17 219.963C186.252 225.693 173.696 227.531 161.577 225.154C154.613 223.789 148.041 221.08 142.202 217.234L139.91 220.713ZM142.752 216.399C148.483 220.174 154.934 222.833 161.769 224.173C173.658 226.504 185.977 224.704 196.689 219.087L195.046 216.09C185.035 221.323 173.531 222.998 162.427 220.82C151.323 218.643 141.303 212.747 134.01 204.122L131.182 206.5C134.451 210.376 138.515 213.607 142.752 216.399Z" clip-rule="evenodd" fill-rule="evenodd"></path>
</g>
</svg>
<svg style={{"--i":2,"--j":4}}>
<path fill="#00FFFF" d="M180.956 186.056C183.849 184.212 186.103 181.521 187.41 178.349C188.717 175.177 189.013 171.679 188.258 168.332C187.503 164.986 185.734 161.954 183.192 159.65C180.649 157.346 177.458 155.883 174.054 155.46C170.649 155.038 167.197 155.676 164.169 157.288C161.14 158.9 158.683 161.407 157.133 164.468C155.582 167.528 155.014 170.992 155.505 174.388C155.997 177.783 157.524 180.944 159.879 183.439L161.129 182.259C159.018 180.021 157.648 177.186 157.207 174.141C156.766 171.096 157.276 167.989 158.667 165.245C160.057 162.5 162.261 160.252 164.977 158.806C167.693 157.36 170.788 156.788 173.842 157.167C176.895 157.546 179.757 158.858 182.037 160.924C184.317 162.99 185.904 165.709 186.581 168.711C187.258 171.712 186.992 174.849 185.82 177.694C184.648 180.539 182.627 182.952 180.032 184.606L180.956 186.056Z" id="center1"></path>
<path fill="#00FFFF" d="M172 166.445C175.068 166.445 177.556 168.932 177.556 172C177.556 175.068 175.068 177.556 172 177.556C168.932 177.556 166.444 175.068 166.444 172C166.444 168.932 168.932 166.445 172 166.445ZM172 177.021C174.773 177.021 177.021 174.773 177.021 172C177.021 169.227 174.773 166.979 172 166.979C169.227 166.979 166.979 169.227 166.979 172C166.979 174.773 169.227 177.021 172 177.021Z" id="center"></path>
</svg>
</div>
)
}Demo组件的index.css样式文件：
.svg-frame {
position: relative;
width: 300px;
height: 300px;
transform-style: preserve-3d;
display: flex;
justify-content: center;
align-items: center;
}
.svg-frame svg {
position: absolute;
transition: .5s;
z-index: calc(1 - (0.2 * var(--j)));
transform-origin: center;
width: 344px;
height: 344px;
fill: none;
}
.svg-frame:hover svg {
transform: rotate(-80deg) skew(30deg) translateX(calc(45px * var(--i))) translateY(calc(-35px * var(--i)));
}
.svg-frame svg #center {
transition: .5s;
transform-origin: center;
}
.svg-frame:hover svg #center {
transform: rotate(-30deg) translateX(45px) translateY(-3px);
}
#out2 {
animation: rotate16 7s ease-in-out infinite alternate;
transform-origin: center;
}
#out3 {
animation: rotate16 3s ease-in-out infinite alternate;
transform-origin: center;
stroke: #ff0;
}
#inner3,
#inner1 {
animation: rotate16 4s ease-in-out infinite alternate;
transform-origin: center;
}
#center1 {
fill: #ff0;
animation: rotate16 2s ease-in-out infinite alternate;
transform-origin: center;
}
@keyframes rotate16 {
to {
transform: rotate(360deg);
}
}效果展示：(是不是很好看)
路由传参
在React Router6中，路由传参的方法与5版本中相同，但是由于6版本推出相应的API，导致与5版本中路由传参有所不同，如下：
params传参：
在React Router6中，因为使用函数式组件并没有this，所有不能使用this.props来拿到传递的参数，6版本中也给我们一个专门拿传参的API，useParams，如下：
在Message组件中再嵌套一层路由，并将Message状态里面的数据通过params传参，传递到子组件路由身上：
import React, { useState } from 'react'
import { Link,Outlet } from 'react-router-dom'
export default function Message() {
const [message] = useState([
{id:'01',title:'1',content:'11111'},
{id:'02',title:'消息2',content:'22222'},
{id:'03',title:'消息3',content:'33333'},
{id:'04',title:'消息4',content:'44444'},
])
return (
<div>
{
message.map((m)=>{
return (
<ul key={m.id}>
<Link to={`detail/${m.id}/${m.title}/${m.content}}`}>{m.title}</Link>
</ul>
)
})
}
<hr />
<Outlet />
</div>
)
}
路由表中去匹配路由链接的路径，如下：
Detail组件中通过useParams这个API来拿到传递过来的数据：
import React from 'react'
import {useParams} from 'react-router-dom'
export default function Detail() {
// 通过解构赋值，拿到params传递的参数
const {id,title,content} = useParams()
return (
<div>
<ul>
<li>{id}</li>
<li>{title}</li>
<li>{content}</li>
</ul>
</div>
)
}当然使用另一个API也能实现效果，useMatch，如下：(了解即可，通过使用上面那种方式)
search传参：
使用search传参，注册路由的使用不需要对路径进行匹配，如下：
使用类似于query参数的形式进行url传参：
使用useSearchParams这个API来拿到传递过来的参数：，这个API类似于useState这个API，需要用数组来解构，第一个参数是状态，第二个状态是操作状态的方法：
import React from 'react'
import { useSearchParams } from 'react-router-dom'
export default function Detail() {
const [search,setSearch] = useSearchParams()
// 拿到数据需要search.get()
const id = search.get('id')
const title = search.get('title')
const content = search.get('content')
return (
<div>
<ul>
<li>{id}</li>
<li>{title}</li>
<li>{content}</li>
<button onClick={()=>setSearch('id=888&title=张三&content=法外狂徒')}>点我更新当前内容</button>
</ul>
</div>
)
}
当然除了使用 useSearchParams 这个API，6版本也有另一个API也能实现相同效果，如下
可以看到 这个API 能拿到searc传递过来的数据，但是需要我们对其进行处理，需要借助一个qs库才能将其转换为对象形式，具体实现过程可以参考我另一篇文章：路由传参—qs处理 。
state传参：
state传参很简单，直接通过一个state，传递要传递的数据，和serarch一样，不需要进行路由匹配
在子路由中通过之前讲解的 useLocation 这个API即可，里面是存放着state的，如下：
import React from 'react'
import { useLocation } from 'react-router-dom'
export default function Detail() {
const {id,title,content} = useLocation().state
return (
<div>
<ul>
<li>{id}</li>
<li>{title}</li>
<li>{content}</li>
</ul>
</div>
)
}编程式路由导航
让我们回忆一下，在React Router5中实现编程式路由导航需要使用this.props.history来实现，而在6版本中的函数式组件当中，是没有this的，所有不能使用5版本中的方法。为此6版本中推出了另一个API来实现编程式路由导航，API为useNavigate，具体使用如下：
import React, { useState } from 'react'
import { Link,Outlet,useNavigate } from 'react-router-dom'
export default function Message() {
const navigate = useNavigate()
const [message] = useState([
{id:'01',title:'消息1',content:'11111'},
{id:'02',title:'消息2',content:'22222'},
{id:'03',title:'消息3',content:'33333'},
{id:'04',title:'消息4',content:'44444'},
])
function showDetail(m){
// 如果是state传参，navigate需有第二个参数，如果是params和search传参就不需要第二个参数了，直接将传参怼在路径上面
navigate('detail',{
replace:false,
state:{
id:m.id,
title:m.title,
content:m.content
}
})
}
return (
<div>
{
message.map((m)=>{
return (
<ul key={m.id}>
<Link to="detail" state={{ id:m.id, title:m.title, content:m.content }}>{m.title}</Link>
<button onClick={()=>showDetail(m)}>点击详情</button>
</ul>
)
})
}
<hr />
<Outlet />
</div>
)
}
不同于5版本中，一般组件要想使用编程式导航还需要导入withRouter，在一般组件使用编程式导航导入的参数和上面一致，也是useNavigate，这里就不再详细讲解了。
当然博主也不是对每个6版本中新建的API都讲解到，只是讲解了常见且常用的，如果想更深一层的去了解，推荐官网：官方文档 。阅读官方文档能够了解更多前沿的新技术。
如果觉得博主不错的，麻烦留下您的三联，您的支持就是博主创作的最大动力！！！
330
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
