小学门户网站建设,网页qq官网,一个vps 几个wordpress,企业网站开发用什么v5 版本既兼容了类组件#xff08;react v16.8前#xff09;#xff0c;又兼容了函数组件#xff08;react v16.8及以后#xff0c;即hook#xff09;。v6 文档把路由组件默认接受的三个属性给移除了#xff0c;若仍然使用 this.props.history.push()#xff0c;此时pr…v5 版本既兼容了类组件react v16.8前又兼容了函数组件react v16.8及以后即hook。v6 文档把路由组件默认接受的三个属性给移除了若仍然使用 this.props.history.push()此时props会提示空值。官方文档给出的解决方案是使用 useNavigate() 这个hook但是 hook 只能存在于函数组件无法用在类组件中。使用类组件进行项目开发的建议react-router-dom使用v5及以前的版本。如果使用函数组件开发建议使用最新的v6版本。 文章目录 1.在类组件中的用法1.1 路由跳转1.2 路由返回1.3 携带参数1.3.1 state 属性携带参数1.3.2 search 属性携带参数1.3.3 路由传参 携带参数 2.在函数组件中的用法2.1 路由跳转2.2 路由返回2.3 携带参数2.3.1 state 属性携带参数2.3.2 search 属性携带参数2.3.3 路由传参 携带参数 3.总结3.1 3.1 router.js 路由文件中3.2 路由跳转、传参 1.在类组件中的用法
import React from react;
import { Router, Route, Switch, Redirect, HashRouter } from react-router-dom;
import { createHashHistory } from history;
...const route () (HashRouterSwitch{/* 重定向不可放在首行 */}{/* Redirect path* to/ / */}Route exact path/ component{Home} /Route exact path/listPage component{ListPage} /Route exact path/detailPage/:id component{DetailPage} /{/* 其他匹配重定向 */}Redirect path* to/ //Switch/HashRouter
);export default route;注意 和 的区别 似乎没有区别
1.1 路由跳转
this.props.history.push(/listPage) 路由入栈
this.props.history.replace(/listPage)路由替换1.2 路由返回
this.props.history.goBack(): 返回上一级路由1.3 携带参数
1.3.1 state 属性携带参数
http://localhost:3000/#/listPage
this.props.history.push({pathname: /listPage,state: {aaa: 123},
});
// 跳转后新页面 通过 this.props.history.location.state 获取
// http://localhost:3000/#/listPage1.3.2 search 属性携带参数
·http://localhost:3000/#/listPage?bbb456
this.props.history.push({pathname: /listPage,search: ?bbb456,
});
// 跳转后新页面 通过 this.props.history.location.search 获取
// url: http://localhost:3000/#/listPage?bbb4561.3.3 路由传参 携带参数
http://localhost:3000/#/detailPage/789
this.props.history.push({pathname: /detailPage / id,
});
// 需要router.js 中路由配合 Route exact path/detailPage/:id component{DetailPage} /
// 跳转后新页面 通过this.props.match.params.id 获取
// url: http://localhost:3000/#/detailPage/7892.在函数组件中的用法
import React from react;
import { HashRouter, Route, Routes, Navigate } from react-router-dom;
...const route () (HashRouterRoutesRoute exact path/ element{Home /} /Route exact path/listPage element{ListPage /} /Route exact path/detailPage/:id element{DetailPage /} /Route exact path* element{Navigate to/ /} /{/* Route exact path* element{NotFound /} / */}/Routes/HashRouter
);export default route;Routes 替换了 Switch。Route中 element 替换了 component/render 属性且值是组件而非组件名。Navigate 组件替换了 Redirect。
2.1 路由跳转 import { useNavigate } from react-router-dom;const navigate useNavigate();// pushnavigate(path);// replacenavigate(path, {replace: true});2.2 路由返回 const navigate useNavigate();// go backnavigate(-1);2.3 携带参数
2.3.1 state 属性携带参数
http://localhost:3000/#/listPage const navigate useNavigate();navigate(/listPage, {state: {aaa: 123,}})// url: http://localhost:3000/#/listPage2.3.2 search 属性携带参数
http://localhost:3000/#/listPage?bbb456 const navigate useNavigate();navigate(/listPage ?bbb456)// url: http://localhost:3000/#/listPage?bbb4562.3.3 路由传参 携带参数
http://localhost:3000/#/listPage/456 const navigate useNavigate();navigate(/detailPage / id)
// 需要router.js 中路由配合 Route exact path/detailPage/:id element{DetailPage /} /
// 跳转后新页面 通过 const { id } useParams(); 获取其中useParams 为 react-router-dom 内方法
// url: http://localhost:3000/#/detailPage/7893.总结
3.1 3.1 router.js 路由文件中
Switch 改用 Routescomponent/render 属性 改为 element Route exact path/listPage element{ListPage /} /Redirect 改用 Navigate Route exact path* element{Navigate to/ /} /
3.2 路由跳转、传参
history.push(path) 改为 navigate(path)history.replace(path) 改为 navigate(path, {replace: true})history.goBack() 改为 navigate(-1)v5 中的 hook 使用比较 -v5 使用 useHistory 的 history.push() -v6 使用 useNavigate 的 navigate()
