这是 react-router-dom v6.4 的 API，createBrowserRouter (opens new window), 用官方的说法就是 This is the recommended router for all React Router web projects。翻译成人话就是 这是所有 React router web 项目的推荐路由器。

如果你的项目使用的是 react-router-dom 6.4 之前的版本，那么你需要更新 react-router-dom

1、安装 react-router-dom

npm install react-router-dom@6.x // 会下载最新版本，也可以执行具体的下载版本

2、路由配置更改如下：

// /src/routes/routes.js
import React, {lazy, Suspense} from 'react';
import {createBrowserRouter} from 'react-router-dom'
const Home = lazy(() => import("../components/Home"))
const Page1 = lazy(() => import("../components/Page1/Page1"))
const Page2 = lazy(() => import("../components/Page2/Page2"))
const Page3 = lazy(() => import("../components/Page3/Page3"))
const Page4 = lazy(() => import("../components/Page4/Page4"))


function LoadingComponent (props) {
	return (
		<Suspense fallback={"加载中"}>{props.children}</Suspense>
	)
}

const routes = createBrowserRouter([
	{
		path: "/",
		element: <LoadingComponent><Home /></LoadingComponent>,
		children: [
			{
				path: "page1",
				element: <LoadingComponent><Page1 /></LoadingComponent>
			},
			{
				path: "page2",
				element: <LoadingComponent><Page2 /></LoadingComponent>
			},
			{
				path: "page3",
				element: <LoadingComponent><Page3 /></LoadingComponent>
			},
			{
				path: "page4",
				element: <LoadingComponent><Page4 /></LoadingComponent>
			},
		]
	}
])

export default routes

3、在 /src/index.js 或 index.jsx 中配置如下，

// 如果使用的是react 18和react-dom 18版本的，
import React, {StrictMode, Suspense} from 'react';
import ReactDOM from 'react-dom/client';  // react-dom 18版本
import { RouterProvider } from "react-router-dom"
import router from './routes/routes'
import { Provider } from 'react-redux'
/* redux数据持久化 */
import {PersistGate} from 'redux-persist/integration/react'
import {persistor, store} from "./reactRedux/index"

ReactDOM.createRoot(document.getElementById('root')).render(
	<StrictMode>
		<Provider store={store}>
			<PersistGate persistor={persistor}>
				<RouterProvider router={router}></RouterProvider>
			</PersistGate>
		</Provider>
	</StrictMode>
)

// 如果使用的是react 17和react-dom 17版本的，
import React, {StrictMode, Suspense} from 'react';
import ReactDOM from 'react-dom';  
import { RouterProvider } from "react-router-dom"
import router from './routes/routes'
import { Provider } from 'react-redux'
/* redux数据持久化 */
import {PersistGate} from 'redux-persist/integration/react'
import {persistor, store} from "./reactRedux/index"

ReactDOM.render(
    <StrictMode>
        <Provider store={store}>
            <PersistGate persistor={persistor}>
                <RouterProvider router={router}></RouterProvider>
            </PersistGate>
        </Provider>
    </StrictMode>,
  document.getElementById('root')
);

至此，一个路由懒加载、redux 数据持久化的基本框架已经搭建好了