升级react-router 3.2.1,先卸载旧的router,安装6.0+版本的router
yarn remove react-router
yarn add react-router-dom react-router
createBrowserRouter 要增加basename的话加在数组后边
const Routes = createBrowserRouter([......],{
basename: '/app'
})
component 改为 element,且element需为reactNode
改之前
import B from './b'
{
path: '/a(/:id)',
component: B,
}
改之后, 同时不再支持可选路径 , 坑爹,很多人都说坑爹 V6: Optional parameters · Issue #7285 · remix-run/react-router · GitHub
{
path: 'a',
element: <B/>,
children: [{
path: ':id',
element: <B/>
}]
},
this.context.router.listenBefore listenBefore也已经被弃用
componentDidMount() {
this.routerChangeListener = this.context.router.listenBefore(this.beforeRouteChange);
}
componentWillUnmount() {
this.routerChangeListener && this.routerChangeListener();
}
beforeRouteChange = () => {
try {
this.props.closeLightBox();
} catch (error) {
console.log('beforeRouteChange', error);
}
return true;
};
更改为
componentDidMount() {
this.routerChangeListener = this.beforeRouteChange
}
shouldComponentUpdate(props) {
if (props.location.search !== this.props.location.search) {
this.routerChangeListener();
}
}
componentWillUnmount() {
this.routerChangeListener && this.routerChangeListener();
}
beforeRouteChange = () => {
try {
this.props.closeLightBox();
} catch (error) {
console.log('beforeRouteChange', error);
}
return true;
};
location.action === "PUT" location.action已被弃用了,暂时找不到解决方案,如果有小伙伴知道如何实现该功能,请评论区告诉我
history={rbHistory} 该方法已弃用createBrowserRouter自带history
onUpdate方法弃用,于是在最外层的组件上加了个方法, componentDidUpdate 的时候执行
const rbRoutes = createBrowserRouter([
{
path: '/',
element: <Layout onUpdate={onRouteUpdate } />,
children: [...]
}
)
componentDidUpdate() {
this.props.onUpdate(this.props)
}
location.query 不见了,需要自己处理
导航相关的,由于props不再有router对象,为了项目不进行大改,需要自己包装个方法
import React from 'react';
import {
useLocation,
useNavigate,
useParams,
useFormAction,
} from "react-router-dom";
import queryString from 'query-string';
export function withRouter(Component) {
function ComponentWithRouterProp(props) {
let location = useLocation();
let navigate = useNavigate();
let params = useParams();
const query = queryString.parse(location.search);
const handleNavigate = (url, isReplace) => {
let handleUrl = url;
if (handleUrl[0] !== '/') {
handleUrl = '/' + handleUrl;
}
navigate(handleUrl, { replace: isReplace });
};
const router = {
push: (url) => handleNavigate(url),
replace: (url) => handleNavigate(url, true),
goBack: () => navigate(-1),
location: { ...location, action: useFormAction() },
query
};
return (
<Component
{...props}
location={{ ...location, query }}
navigate={navigate}
params={params}
router={router}
/>
);
}
return ComponentWithRouterProp;
}
export function withRouterDom(Component) {
const Node = withRouter(Component);
return <Node />;
}
- import PropTypes from 'prop-types';
+ import { withRouter } from 'scripts/utils/RBWithRouter';
- this.context.router.goBack();
+ this.props.router.goBack();
- Index.contextTypes = {
- router: PropTypes.object.isRequired
- };
- export default Index;
+ export default withRouter(Index);