react-router-dom（v6）的学习和使用配合React.lazy()

最新推荐文章于 2025-04-12 22:22:30 发布

且菜且折腾

最新推荐文章于 2025-04-12 22:22:30 发布

阅读量782

点赞数

分类专栏： react 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_43933139/article/details/128274837

版权

react 专栏收录该内容

3 篇文章

订阅专栏

使用方式

先把路由剥离出来成一个单独的文件，方便以后扩展和管理

import React from "react"
import { BrowserRouter as Router, useRoutes } from "react-router-dom"
const Page1 = React.lazy(() => import("../pages/login"))
const Page2 = React.lazy(() => import("../pages/data-manage"))
const Page3 = React.lazy(() => import("../pages/big-screen/water"))
const Page4 = React.lazy(() => import("../pages/big-screen/stricken"))
const Page5 = React.lazy(() => import("../pages/big-screen/supply"))
const Page6 = React.lazy(() => import("../pages/big-screen/river"))
const Page7 = React.lazy(() => import("../pages/big-screen/water_conservancy"))
const Page8 = React.lazy(() => import("../pages/home"))
const routerConfig = [
	{
		path: "/",
		element: <Page8 />,
	},
	{
		path: "/login",
		element: <Page1 />,
	},
	{
		path: "/data-manage",
		element: <Page2 />,
	},
	{
		path: "/big-screen",
		redirect: "/big-screen/water",
		children: [
			{
				path: "water",
				element: <Page3 />,
			},
			{
				path: "stricken",
				element: <Page4 />,
			},
			{
				path: "supply",
				element: <Page5 />,
			},
			{
				path: "river",
				element: <Page6 />,
			},
			{
				path: "water_conservancy",
				element: <Page7 />,
			},
		],
	},
]

export function SelfApp() {
	const demo = useRoutes(routerConfig)
	return demo
}