vite4 + react18 + react-router-dom6 路由懒加载、路由重定向

前言

下雨天，摸鱼天。由于本人所在的团队准备用react搭建项目，然后渺小的我看了一下react所用到的路由react-router-dom，然后进行了一系列的操作，得出的一些个人心得。(reactrouter文档)

项目展示以及依赖

路由懒加载

在我的学习下，我发现有3种加载路由文件的方法，需要使用路由懒加载那么就要使用第二或者第三种方法就可以了

js 复制代码

// 第一种 同步导入
import NotFound from "../pages/NotFound";
// 第二种 按需加载（React的懒加载----React.lazy）
import { lazy } from "react";
const Main = lazy(() => import("../pages/Main"));
// 第三种 按需加载（react-router-dom的懒加载----lazy）
async lazy() {
    let home = await import("../pages/Home");
    return {
        Component: home.default,
    };
}

这2种路由懒加载的区别

React.lazy 需要配合 Suspense 组件使用，显示加载状态
react-router-dom 需要使用 useNavigation 获取路由当前的状态(idle → loading → idle)，显示加载状态

实验如下

我把Home页面和Main都加载延迟2秒，然后通过Navigate来进行路由的切换，在加载路由的时候通过页面展示来显示加载的状态。

js 复制代码

// router/index.jsx
import { createHashRouter } from "react-router-dom";
import { lazy } from "react";
const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
const Layout = lazy(() => import("../pages/Layout"));
const Main = lazy(async () => {
    await sleep(2000); // 模拟加载延迟
    let Main = await import("../pages/Main");
    return Main

});
import NotFound from "../pages/NotFound";
const router = createHashRouter([
    {
        path: "/",
        Component: Layout,
        children: [
            {
                path: "/Home",
                async lazy() {
                    await sleep(2000); // 模拟加载延迟
                    let home = await import("../pages/Home");
                    return {
                        Component: home.default,
                    };
                },
            },
            { path: "/Main", Component: Main },
            { path: "/NotFound", Component: NotFound },
        ]
    },
])
export default router;

js 复制代码

// app.jsx
import './App.css'
import { RouterProvider } from "react-router-dom";
import router from "./router";
function App() {
  return (
      <RouterProvider router={router} />
  )
}
export default App

js 复制代码

// NotFound/index.jsx
import { NavLink } from "react-router-dom";
export default function NotFound() {
  return (
    <div>
      <h1>NotFound</h1>
            <NavLink to="/Main">跳转到Main</NavLink>

    </div>
  );
}

js 复制代码

// Main/index.jsx
import { NavLink } from "react-router-dom";

export default function Main() {
  return (
    <div>
      <h1>main</h1>
        <NavLink to="/Home">跳转到Home</NavLink>
    </div>
  );
}

js 复制代码

// Home/index.jsx
import { NavLink } from "react-router-dom";
export default  function Home() {

  return (
    <div>
      <h1>home</h1>
      <NavLink to="/NotFound">跳转到NotFound</NavLink>
    </div>
  );
}

js 复制代码

// Layout/index.jsx
import { Outlet, useNavigation } from 'react-router-dom';
import { Suspense } from 'react'
export default function Layout() {
    const navigation = useNavigation();
    const { state } = navigation;
    const loading = state === 'loading';
    return <div>
        {
            loading === true ? (<div> react-router的页面加载中...</div >) : (
                <Suspense fallback={<div>Suspense的页面加载中...</div>}>
                    <Outlet />
                </Suspense>
            )
        }
    </div>
}

效果展示

使用路由懒加载的好处

使用懒加载打包后，会把懒加载的组件打包成一个独立的文件，从而减小主包的大小。

未使用懒加载打包结果

js 复制代码

import { createHashRouter, Navigate } from "react-router-dom";
import { lazy } from "react";
import Layout from "../pages/Layout";
import Home from "../pages/Home";
import Main from "../pages/Main";
import NotFound from "../pages/NotFound";
const router = createHashRouter([
    {
        // 主页重定向到 /Home
        index: true,
        element: <Navigate to="/Home" replace></Navigate>,
    },
    {
        path: "/",
        Component: Layout,
        children: [
            { path: "Home", Component: Home },
            { path: "Main", Component: Main },
            { path: "NotFound", Component: NotFound },
        ]
    },
    {
        // 这里使用了通配符路径 "*" 来匹配所有未匹配的路径
        // 这样可以确保所有未匹配的路径都会显示 404 页面
        path: "*",
        Component: NotFound
    },
])
export default router;

使用懒加载打包结果

js 复制代码

import { createHashRouter, Navigate } from "react-router-dom";
import { lazy } from "react";
const Layout = lazy(() => import("../pages/Layout"));
const Main = lazy(() => import("../pages/Main"));
const NotFound = lazy(() => import("../pages/NotFound"));
const router = createHashRouter([
    {
        // 主页重定向到 /Home
        index: true,
        element: <Navigate to="/Home" replace></Navigate>,
    },
    {
        path: "/",
        Component: Layout,
        children: [
            {
                path: "Home",
                async lazy() {
                    let home = await import("../pages/Home");
                    return {
                        Component: home.default,
                    };
                },
            },
            { path: "Main", Component: Main },
            { path: "NotFound", Component: NotFound },
        ]
    },
    {
        // 这里使用了通配符路径 "*" 来匹配所有未匹配的路径
        // 这样可以确保所有未匹配的路径都会显示 404 页面
        path: "*",
        Component: NotFound
    },
])
export default router;

路由重定向

为什么要使用路由重定向

当用户访问根路径的时候，会自动转跳到其他页面
路由边界的问题，当用户访问一个根本没有的路径时，会自动跳转到一个特定的页面

实验如下

一开始打开网页的时候，输入根路径 http://localhost:5173/#/ 然后让路由自己重定向到Home页面。接着我在url上输入一个不存在的路径时 http://localhost:5173/#/321 ，路由会帮我跳转到NotFound页面

js 复制代码

import { createHashRouter, Navigate } from "react-router-dom";
import { lazy } from "react";
const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
const Layout = lazy(() => import("../pages/Layout"));
const Main = lazy(async () => {
    await sleep(2000); // 模拟加载延迟
    let Main = await import("../pages/Main");
    return Main

});
import NotFound from "../pages/NotFound";
const router = createHashRouter([
    {
        // 主页重定向到 /Home
        index: true,
        element: <Navigate to="/Home" replace></Navigate>,
    },
    {
        path: "/",
        Component: Layout,
        children: [
            {
                path: "/Home",
                async lazy() {
                    await sleep(2000); // 模拟加载延迟
                    let home = await import("../pages/Home");
                    return {
                        Component: home.default,
                    };
                },
            },
            { path: "/Main", Component: Main },
            { path: "/NotFound", Component: NotFound },
        ]
    },
    {
        // 这里使用了通配符路径 "*" 来匹配所有未匹配的路径
        // 这样可以确保所有未匹配的路径都会显示 404 页面
        path: "*",
        Component: NotFound
    },
])
export default router;