react-dom-router v5 和v6 对比

weixin_58555796

已于 2023-02-23 00:34:15 修改

阅读量197

点赞数

分类专栏： react 文章标签： react.js Powered by 金山文档

于 2023-02-21 00:13:42 首次发布

本文链接：https://blog.csdn.net/weixin_58555796/article/details/129117220

版权

react 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.Link 和NavLink

2.Route和Switch以及Routes

3.重定向

4.路由嵌套

5.参数传递

6.参数获取

7.跳转：

8.路由配置

9.常见hook

个人示例代码:https://gitee.com/afternoon-olympics/react-router-dom-v6.git

Link 和NavLink

（1)v5基础使用

1）Link

a.基础用法：<Link replace={true} to='/page1' >page1</Link>

b.属性：1.replace：是否替换之前的路径 2.to：页面路径

c.扩展：.和..语法

示例：<Link to="..">Users</Link>

<Link to=".">Users</Link>

<Link to="../page1">Users</Link> <Link to="./page1">Users</Link>

<Link to="page1">Users</Link>

解释：..代表返回上一层路由的默认路由第一个或者带有index的路由(index属性下文解释) .代表当前路由 ./page1代表当前路由下的page1路由 page1也是如此 /page1父路由下的page1

2）NavLink

a.基础示例： <NavLink replace={true} exact activeStyle={{color:'#000'}} to='/page1' activeClassName='page1'>page1</NavLink>

b.属性:1.exact：是否精确匹配路径（如果精确匹配路径时，带上这个属性后会匹配完全相同的路径比如'/page'的路径就不会被'/'匹配） 2.activeStyle：当路径被匹配上的时候显示的样式 activeClassName：当被匹配上的时候显示的class，默认会有一个 active的class 3.to：路径 4.replace 是否替换路径

c.也支持.和..语法

(2)v6变化

1).变化：NavLink：exact失效移除activeStyle和activeClassName 新增end和属性 isActive end代表精确匹配但是不代表匹配到一个就不往下匹配

2).示例: <NavLink replace={true} className={({ isActive }) => { return isActive ? "title" : ""; }}

style={({ isActive }) =>isActive ? { background: "#000" } : { background: "#fff" }}

to="/" end>11</NavLink>

3).Link:常见用法未变

2.Route和Switch以及Routes

移除了Switch 用Routes代替并且routes必须被Routes包裹组件自动精确匹配不再需要exact属性并且Route标签的 component改为element，值也从写组件名称改为写组件

1)v5:

a.示例：<Switch>

</Switch>

b.属性：path：路由路径 component：对应的组件 index：是否是默认路由 exact：是否精确匹配 Switch标签：匹配到第一个就不再往下匹配

2）v6：

</Routes>

属性：path：路由路径 element：对应的组件 index：是否是默认路由

3）注意：Route标签内不可有空格和字母等否则会报错哦

4）也支持. ..语法

3.重定向

1)变化：由Redirect变为 Navigateto 并且新增replace属性（是否替换） v5直接替换

2)v5: <Redirect to='/page4' state={state}></Redirect>

to：路径 state：state参数

3) v6: <Navigate to="/home" replace={true} state={state} />;

4）也支持. ..语法

4.路由嵌套

1）变化： path 通配符将只支持 * 和：(以前的？等将不再支持)

2）v5：

父亲：<Switch>

</Switch>

儿子也是这样写不能直接在父亲里进行嵌套

2）v6：有两种写法

a.直接总的里面写嵌套

</Route>

</Routes>

子路由要用Outlet占位

b.父亲：

</Routes>

儿子：

</Routes>

c.注意：

这样写地时候可以匹配上但是占位Page5组件和page3是同一等级

5.参数传递

1）v5基础用法

a.传递search：<NavLink to="/page3?q=2">page3</NavLink>

b.传递params：<NavLink to="/page3/1">page3</NavLink> （注意：to可以/page3/1?a=1）获取的时候不会有问题

b.传递params及search及query和state：<NavLink to={{query:{a:1},search:'? oo=11',pathname:'/page5/2',state:{c:88}}} >page5</NavLink> (注意：pathname后面不能带 search不然获取的时候无法准确获取到params)

2）v6基础用法

a.to方式传递search和params和v5一样

b.state传递方式：<NavLink to="/page3" state={{ a: 1 }}> page3</NavLink>

6.参数获取

1.变化 useHistory,useRouteMatch移除，添加useSearchParams 和useResolvedPath

2.注意：useSearchParams的参数的获取方式// let [q] = useSearchParams() // console.log(q.get('i');——i是search的key

3.passName和state用useLocation获取获取search：useSearchParams 获取params： useParams

4.v5常用：useLocation useParams useRouteMatch v6常用：useLocation useSearchParams useParams

7.跳转：

1.变化：useNavigate代替useHistory：

1）v5 跳转到page3 并且替换

const hisTory=useHistory()；

<button onClick={()=>{hisTory('/page3',{ replace: true })}}>11</button>

2）v6 返回上一页

const hisTory=useNavigate()；

<button onClick={()=>{hisTory(-1)}}>11</button>

跳转到page3 并且替换

<button onClick={()=>navgate('12',{replace:true})}>

2.也支持.和..语法

8.路由配置：

1.不在需要react-router-config 新增useRoutes的Hook

2.v5 1）npm install react-router-config

2）配置路由：

const routes=[{ path:'/page1',

// 这里不是写标签而是写变量

component:Page1,

exact:true,

},{

path:'/page5/:id',

component:Page5,

// 不能精确匹配不然就不会去下层找子路由了

// exact:false,

// 这里叫routes 另外一个是children

routes:[{

path:'/page5/page51',

exact:true,

component:Page6,

}]

3) {renderRoutes(routes)} 放至Switch标签内

4）对于子路由：import {matchRoutes,renderRoutes} from 'react-router-config' {renderRoutes(props.route.routes)} (注意：const branch=matchRoutes(props.route) 可以获取子路由信息)

3.v6 利用useRoutes Hook

1）const Routre = () => {

const routes = useRoutes([

{

path: "/page1/page",

element: <Navigate replace={true} to="/page1"></Navigate>,

{

path: "/page3",

element: <Page3></Page3>,

children: [

{

path: "page31",