react-router5升级6总结

安装包版本

"react": "18.3.1",
"react-dom": "18.3.1",
"react-router": "6.23.1",
"react-router-dom": "6.26.1"

需要确保在 Routes 组件内部只包含 Route 组件或 React.Fragment

// 报错All component children of <Routes> must be a <Route> or <React.Fragment>
<Switch>
    <Route path="/" >
        <Frame
            myRoute={myRoute}
        />
    </Route>
</Switch>

改为

<Routes>
    <Route
        path="/"
        element={(
            <Frame
                myRoute={myRoute}
            />
        )}
    >
    </Route>
</Routes>

2、api改变

import {
    Router, Switch, useHistory
} from 'react-router-dom';
改为
import {
    BrowserRouter as Router, Routes, useNavigate
} from 'react-router-dom';

useHistory().listen改写

useEffect(() => {
    const unListen = history.listen(handleRouteLocation);
    return () => {
        unListen();
    };
}, []);

监听路由改写为

const location = useLocation();

useEffect(() => {
    handleRouteLocation(location);
}, [location]);

React Router 6 的 useNavigate 钩子和内部的 history 对象并不直接提供 action 信息（例如 PUSH 或 POP）。如果你确实需要获取 action 信息，可以通过使用 history 包和 unstable_HistoryRouter 来实现更细粒度的控制。

react-dom挂载改写

import { render } from 'react-dom';
const root = document.getElementById('root');
render(<App />, root);

改为

import { createRoot } from 'react-dom/client';
import App from './app';

const root = document.getElementById('root');
createRoot(root).render(<App />);