庄浪县住房和城乡建设局网站,鄂州市门户网站,wordpress相关推荐插件,可视化编辑器wordpress在react后续的版本中,路由组件中props找不到router相关的方法,这就需要自己去封装一个withRouter插件,给路由组件的props上配置原来的属性,方便路由组件中进行路由操作.
代码如下:
新建一个withRouter.jsx文件
import {useLocation,useNavigate,useParams,} from reac…在react后续的版本中,路由组件中props找不到router相关的方法,这就需要自己去封装一个withRouter插件,给路由组件的props上配置原来的属性,方便路由组件中进行路由操作.
代码如下:
新建一个withRouter.jsx文件
import {useLocation,useNavigate,useParams,} from react-router-dom;function withRouter(Component) {function ComponentWithRouterProp(props) {let location useLocation();let navigate useNavigate();let params useParams();return (Component{...props}router{{ location, navigate, params }}/);}return ComponentWithRouterProp;}export default withRouter
使用如下
import React, { Component } from react
import {Routes,Route} from react-router-domimport { Button } from antd;
import withRouter from ../../utils/withRouter
export default withRouter(class index extends Component {jumpLogin (){//操作props中router内的属性方法,就可以操作路由了this.props.router.navigate(/login)}render() {console.log(this.props,路由)return (divh2dashborad页面/h2div classNamedashboardContentButton typeprimary onClick{this.jumpLogin}跳转到登录页面/Button/div/div)}
})
