react-router6.0做出了一些改变
路由注册将<Switch />改成了<Routes />
路由引入将component改成了element
新增多个hook
新增组件
新增routes和路由注册用法
import React, { Component } from 'react'
import { Link, Route, Routes } from 'react-router-dom'
import PagesOne from '../pages/PagesOne'
import PagesTwo from '../pages/PagesTwo'
export default class Index extends Component {
?render() {
?return (
<>
<div>
<Link to="/PagesOne">页面1</Link>
<Link to="/PagesTwo">页面2</Link>
</div>
{/* 注册路由 */}
?<Routes>
?<Route path="/PagesOne" element={<PagesOne />}></Route>
?<Route path="/PagesTwo" element={ <PagesTwo />}></Route>
?</Routes> ?
</>
)
}
}重定项Redirect
react-route6.0版本已经移除了Redirect组件，实现重定向可以使用通配符配合Navigate组件的方式实现
?
render() {
?return (
<>
<div>
<Link to="/PagesOne">页面1</Link>
<Link to="/PagesTwo">页面2</Link>
</div>
{/* 注册路由 */}
?<Routes>
? {/* caseSensitive:区分大小写 */}
?<Route path="/PagesOne" caseSensitive element={<PagesOne />}
?<Route path="/PagesTwo" element={<PagesTwo />}></Route>
<Route path="*" element={<Navigate to="/PagesTwo" />} />
?</Routes> ?
</>
)
?}Navigate
Navigate组件只要被渲染，就修改路径并切换视图。
NavLink
路由高亮效果，activeClassName在6版本已经不再使用，如果需要实现高亮效果，将className写成函数的形式，函数接收一个参数，参数为一个对象名为isActive的值，该值为ture，表示该路由被激活。
<div>
<NavLink to="/PagesOne">1</NavLink>
<NavLink className={(a)=>{return a.isActive?'acitve pages': 'pages'}} to="/PagesTwo">2</NavLink>
</div>useRoute路由表
react-route6支持路由表配置了！！！！！！！
新建一个文件夹routes，在新建一个路由表文件index.js,配置路由规则
import PagesOne from '../pages/PagesOne'
import PagesTwo from '../pages/PagesTwo'
export default [
{
path: '/PagesOne',
element: <PagesOne />
},
{
path: '/PagesTwo',
element: <PagesTwo />
}
]导出路由并使用路由规则
import React from 'react'
import {NavLink,useRoutes} from 'react-router-dom'
import routes from '../route/index'
export default function Index() {
let element=useRoutes(routes)
?return (
<>
<div>
<NavLink to="/PagesOne">页面1</NavLink>
<NavLink to="/PagesTwo">页面2</NavLink>
</div>
{/* 注册路由 */}
{ element} ?
</>
)
}值得注意的是：路由表的方式使用的必须是Hooks的方式，即可组件必须是函数组件，类组件无法实现。
嵌套路由
children配置项
import PagesOne from '../pages/PagesOne'
import PagesTwo from '../pages/PagesTwo'
import Child from '../pages/Child'
import ChildOne from '../pages/ChildOne'
export default [
{
path: '/PagesOne',
element: <PagesOne />,
},
{
path: '/PagesTwo',
element: <PagesTwo />,
children: [
{
path: 'Child',
element: <Child />
},
{
path: 'ChildOne',
element: <ChildOne />
},
]
}
]使用路由出口组件Outlet（类似vue的routeView）
在对应的路由组件
import React from 'react'
import { Link,Outlet} from 'react-router-dom'
export default function PagesTwo() {
?return (
<div>
?<Link to="Child">点我看片</Link>
? <Link to="ChildOne">点我学习</Link>
?<Outlet></Outlet>
</div>
)
}?
route-hooks
路由传参
组将路由传参和5版本的一样，只是由于是函数式组件接收参数需要借助hooks来实现。
useParams：获取params参数
入参：
<NavLink to="/PagesTwo/13/xiaohuang">页面2</NavLink>路由表：
path: '/PagesTwo/:id/:name',接参数
import React from 'react'
import { Link,Outlet,useParams} from 'react-router-dom'
export default function PagesTwo() {
?let params=useParams()
?return (
<div>
?<Link to="Child">点我看片</Link>
?<Link to="ChildOne">点我学习</Link>
{params.id}++++{params.name }
?<Outlet></Outlet>
</div>
)
}获取match
5版本通过match获取到参数，6版本可以使用useMatch来获取
let match = useMatch("/PagesTwo/:id/:name")获取search参数
使用useSearchParams获取search参数，获取的值是一个数组，数组第一项使用实例，第二项是一个函数，第一个实例调用get方法获取对应的参数；第二个项适用于设置其参数。
import React from 'react'
import { Link,Outlet,useParams,useSearchParams} from 'react-router-dom'
export default function PagesTwo() {
let [search,searchFn] = useSearchParams()
return (
<div>
?<Link to="Child">点我看片</Link>
?<Link to="ChildOne">点我学习</Link>
{search.get('id')}++++{search.get('name')}
?<Outlet></Outlet>
</div>
)
}这种方式路由表正常配置即可
获取location
seach参数在版本5的时使用location获取，在6可以通过hook：useLocation获取到location
import {useLocation} from 'react-router-dom'
let a=useLocation()
console.log(a)获取state参数
这里是使用useLocation获取，useLocation中有个state属性，通过这个属性获取
编程式路由导航
useNavigate(path,[obj])
import React from 'react'
import { Link,Outlet,useNavigate} from 'react-router-dom'
export default function PagesTwo() {
let navigate=useNavigate()
function gotoOne() {
navigate('/One')
}
return (
<div>
?<Link to="Child">点我看片</Link>
<Link to="ChildOne">点我学习</Link>
<input type="button" value="点我" onClick={gotoOne}/>
?<Outlet></Outlet>
</div>
)
}转state参数的时候
navigate('/One',{
? ?replace:false,
? ?state:{
? ? ? ?name:'xiaohzi',
? ? ? ?age:12
? }
})配置项只支持replace和state
使用useNavigate实现前进和后退
import {useNavigate} from 'react-router-dom'
let navigate=useNavigate()
navigate(1)
navigate(-1)useInRouterContext
表示该路由是否处在路由环境上下文。是被BrowserRouter组件包裹的全部路由组件都是处在路由环境上下文内，获取的值是一个Boolean值
import React from 'react'
import { Link,Outlet,useInRouterContext} from 'react-router-dom'
export default function PagesTwo() {
let a = useInRouterContext()
console.log(a);
return (
<div>
?<Link to="Child">点我看片</Link>
<Link to="ChildOne">点我学习</Link>
?<Outlet></Outlet>
</div>
)
}useNavigationType
表示获取到通过何种方式跳到该路由的
declare function useNavigationType(): NavigationType;
type NavigationType = "POP" | "PUSH" | "REPLACE";POP：刷新
useOutlet
declare function useOutlet(): React.ReactElement | null;如果组件没有挂载，获取的是null，组件挂载了将获取到组件的实例对象
useResolvedPath
解析路由获取search，path和hash
declare function useResolvedPath(to: To): Path;import { Link,Outlet,useResolvedPath} from 'react-router-dom'
let a = useResolvedPath('/about?id=12&name=13#woshini')
console.log(a);结果
{pathname: '/about', search: '?id=12&name=13', hash: '#woshini'}
