在 create-react-app (CRA) 创建的应用中使用 react-router-dom v7以及懒加载的使用方法

在 create-react-app (CRA) 创建的应用中使用 react-router-dom v7 的方法

众所周知，react-router v7 的使用方式发生了一些变化，开发者在使用时可能会遇到一些问题。

官方文档提供了三种模式：框架模式、数据模式、声明模式。

• 本文将重点介绍数据模式的基本使用方法。

• 懒加载的使用方式也与之前的 router v6 有所不同，将在后续代码中进行说明。

以下是具体的使用步骤：

1. 准备 CRA 项目

确保你已有一个使用 create-react-app 创建的项目。

2. 安装 react-router-dom v7

npm install react-router-dom@7

3. 配置路由器及路由表 (/src/router/index.tsx)

以下配置中的 Demo 组件使用了懒加载方式。

// /src/router/index.tsx

import type { RouteObject } from "react-router-dom";
import React from "react";
import { createHashRouter, Navigate } from "react-router-dom";

import App from "@/App";

const routes: RouteObject[] = [
  {
    path: "/",
    // App 组件未使用异步加载
    Component: App,
    children: [
      {
        index: true, // 当路径为 / 时，作为默认子路由
        element: <Navigate to="/demo" replace />
      },
      {
        path: "/demo",
        // 异步导入组件（懒加载）
        lazy: async () => {
          const Component = await import("@/views/Demo");
          return {
            Component: Component.default,
          };
        },
        // 如果不使用懒加载，则直接使用 element 属性
        // element: <Demo />
      },
    ],
  }
];

export const router = createHashRouter(routes);

4. App.tsx 组件的写法

• 使用 <Outlet /> 作为子路由的占位符。
• 利用 useNavigation 处理加载状态。

import React from "react";
import { Link, Outlet, useNavigation } from "react-router-dom";
import Loading1 from "@/views/loading1"; // 修正了组件名拼写 (loding1 -> loading1)

function App() {
  // 判断异步加载状态
  const navigation = useNavigation();
  console.log(navigation.state);
  const isLoading = navigation.state === "loading";

  return (
    <div className="App">
      <div>
        <Link to="/demo">Demo</Link>
      </div>

      <div>
        {/* 如果是异步加载组件，可以这样显示加载过程中的提示 */}
        {isLoading ? <Loading1 /> : <Outlet />}
      </div>
    </div>
  );
}

export default App;

5. 入口文件写法 (/src/index.tsx)

由于我们使用的是布局路由和数据模式，写法会有所不同：

• 使用 <RouterProvider /> 渲染路由。

// /src/index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";

// 导入之前配置的路由器
import { router } from "./router";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

// 使用 RouterProvider 渲染，App 组件已包含在路由配置中
root.render(<RouterProvider router={router} />);

完成以上步骤即可正常使用路由。