前言
下雨天，摸鱼天。由于本人所在的团队准备用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;效果展示
