React-router?v6在Class组件和非组件代码中的正确使用
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
最近内部正在开发的 react 项目 react-router
全线升级到了 v6 版本
v6 版本中很多 API 进行了重构变更,导致很多旧写法失效
下面记录一下 history
模块在 v6 中的用法
在封装的request等非组件代码中如何使用 history 进行路由?
1. history路由用法
将 createBrowserHistory()
创建的 history
与新的 unstable_HistoryRouter
API进行上下文绑定
注意:
在 v6 版本中如果不对上下文进行绑定直接使用 createBrowserHistory()
创建的 history
进行编程式路由操作
将出现路由变化 UI 不变化的问题,hash
和 history
模式同理。
import { createBrowserHistory } from 'history'; import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom'; let history = createBrowserHistory(); function App() { return ( <HistoryRouter history={history}> // The rest of your app </HistoryRouter> ); } history.push("/foo");
2. hash路由用法
import HashHistory from 'history/hash'; import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom'; function App() { return ( <HistoryRouter history={HashHistory}> // The rest of your app </HistoryRouter> ); } history.push("/foo");
项目升级了v6版本,怎么兼容旧的Class组件?
使用新的 hooks API封装高阶组件包裹 class 组件进行 props 的传递
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; } // class components @withRouter() class YouClassComponent extends React.Component {} export default YouClassComponent // or class YouClassComponent extends React.Component {} export default withRouter(YouClassComponent)
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持程序员之家。
相关文章
浅谈react-router HashRouter和BrowserRouter的使用
本篇文章主要介绍了浅谈react-router HashRouter和BrowserRouter的使用,具有一定的参考价值,有兴趣的可以了解一下2017-12-12react native仿微信PopupWindow效果的实例代码
本篇文章主要介绍了react native仿微信PopupWindow效果的实例代码,具有一定的参考价值,有兴趣的可以了解一下2017-08-08
最新评论