react老项目 升级react-router

升级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);