react-dom-router v5 和v6 对比

目录

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

  1. 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>

<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>

<Route path='/' exact component={Page3}></Route>

<Route path='/page1' exact component={Page1}></Route>

</Switch>

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

2)v6:

<Routes>

<Route path="/" element={<div>222</div>}></Route>

<Route index element={<Activity />} />

<Route path="/page1" element={<Page1></Page1>}></Route>

</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>

<Route path='/' exact component={Page3}></Route>

<Route path='/page5/:a' exact component={Page5}></Route>

</Switch>

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

2)v6:有两种写法

a.直接总的里面写嵌套

<Routes>

<Route path="/" element={<div>222</div>}></Route>

<Route path="/page3/*" element={<Page3></Page3>}>

<Route path='page31' element={<Page5></Page5>}></Route>

</Route>

</Routes>

子路由要用Outlet占位

b.父亲:

<Routes>

<Route path="/page3/*" element={<Page3></Page3>}>

</Routes>

儿子:

<Routes>

<Route path='page31' element={<Page5></Page5>}></Route>

</Routes>

c.注意:

<Route path="/page3/page31" element={<Page5></Page5>}></Route>

<Route path="/page3/*" element={<Page3></Page3>}>

这样写地时候可以匹配上 但是占位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",

element: <Page5></Page5>,

},

{

path: "page32",

element: <div>444</div>,

},

{

// 可以用index表示默认路由

index: true,

element: <div>444</div>,

},

],

},

]);

return routes;

};

  1. <Routre></Routre> 放到原来Routes的位置

9.常见hook

useInRouterContext:是否被BrowserRouter或者HashRouter所包裹 包裹则为true

useNavigationType:如何来到当前页面 pop代表是刷新页面或直接进入当前页面

useOutletContext:Outlet传递过来的参数

结束语:前端菜鸟自我总结,如有错误,欢迎指正,也敬请谅解!!!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值