首页 > 其他分享 >react-router路由懒加载/路由守卫

react-router路由懒加载/路由守卫

时间:2024-03-08 17:25:48浏览次数:20  
标签:const App react 守卫 router 路由 加载

路由懒加载

目前在网络上搜到的路由懒加载方式基本都是通过React.lazy()方法配合Suspense的方式,可能是受vue-router的影响,我很不喜欢这种方式,不喜欢就改变。

上代码

import {createBrowserRouter} from "react-router-dom";

const router = createBrowserRouter([
    {
        path: "/",
        async lazy() {
            const {App} = await import("../App.jsx")
            return {Component: App}
        },
        children: [
            {
                path: "/news", async lazy() {
                    const {News} = await import("../pages/News.jsx")
                    return {Component: News}
                }
            },
            {
                path: "/about", async lazy() {
                    const {About} = await import("../pages/About.jsx")
                    return {Component: About}
                }
            },
        ]
    }
])

export default router

有几个注意点

  1. 组件导出方式不能使用默认导出,而使用分别导出的方式,在引入的时候用解构引入
  2. 这种路由懒加载方式不能在外层套自高阶组件,我暂时想不到怎么做,如果有人能解决希望分享出来
  3. 套高阶组件无非是想实现路由守卫的功能,下面提供另一种方式实现路由守卫的功能

路由守卫

用过Vue的都知道,Vue有官方自己的router,里面的路由守卫确实好用,而react只能自己实现.
路由守卫无非就是路由跳转的时候可以干点什么,现在网络上大都是封装高阶组件的方式实现,看看都觉得繁琐,,一顿花里胡哨不如下面几行,你细品

function App(){
	const navigate = useNavigate()
	const {pathname} = useLocation()
	const logged = isLogin()

	useEffect(() => {
		if (!logged && pathname !== "/auth") {
			navigate("/auth")
		}
	}, [pathname]);

	return <h1>hello world</h1>
}
export default App

标签:const,App,react,守卫,router,路由,加载
From: https://www.cnblogs.com/luyifo/p/18061442

相关文章

  • react-pdf 实现pdf文件预览功能
    参考文档https://www.npmjs.com/package/react-pdfhttps://github.com/wojtekmaj/react-pdf#readme 一、概述react项目中,很多时候(尤其是需展示报告的页面)会遇到需要预览pdf文件的需求。而据调研,使用react-pdf插件可以很好地实现这个功能。  二、操作步骤1.安......
  • 全局地图+router-view实现方式
    框架构建:业务需求:地图或者cesium为项目基本组件,且公用,在各个页面中开发对应功能方法实现:1,构建layout//原则上我们使用router-view控制页面,即使用路由调用各个页面//在layout中我们需要给一个div挂载对应的地图实例//将router-view覆盖于实例之上//注意//router-view的tr......
  • React设计原理解密及核心源码解读
    一、React基础回顾1、react介绍React是一个用于构建用户界面的JavaScript库,它只负责应用的视图层,帮助开发人员构建快速且交互式的web应用程序。React使用组件的方式构建用户界面。2、JSX语法回顾在React中使用JSX语法描述用户界面,它是一种JavaScript语法扩展......
  • 无分类域间路由选择(CIDR)
    构成超网,网络1:206.1.0.0/17网络2:206.1.128.0/17网络1和网络2聚合成一个较大的子网前16位相同,从第17位开始10000000和网络2的第17位00000000取交集得到聚合后的超网206.1.0.0/16划分子网由少到多的过程构成超网是由多到少的过程 地址解析协议ARP无论网络层使用什......
  • React — Redux详解
    Redux是一个用于JavaScript应用程序的状态管理库。它可以帮助您管理应用程序中的状态,并确保状态的一致性和可预测性。Redux主要用于处理大型应用程序中的复杂状态逻辑,例如跨组件共享状态、处理异步数据流等。Redux的核心概念包括:Store(存储):Redux应用程序的状态......
  • React jsx 语法解析 & 转换原理
    jsx介绍jsx是一种JavaScript的语法扩展(eXtension),也在很多地方称之为JavaScriptXML,因为看起就是一段XML语法,用于描述UI界面,并且可以和JavaScript代码结合使用。比起vue中的模板语法,更加灵活,且不需要学习模板语法中的特定标签,比如:v-if、v-for、v-bind等,而是直接使用JavaScript语......
  • React Hooks 钩子特性及应用场景
    Hooks是React16.8的新增特性。它可以让你在不编写class组件的情况下使用state以及其他的React特性。ReactHooks表现形式是以use开头的函数被称为Hook。useState是React提供的一个内置Hook。你可以在ReactAPI参考中找到其他内置的Hook。你也可以通过组合......
  • 第六十八天 BBS项目之四 分组连表查询 路由匹配进阶使用
    一、内容回顾#1登录页面搭建-bootsrtap的栅格,form-group,input:form-control-验证码#2验证码图片的生成-1pillow生成一张图片-2图片上写文字-3设置文字大小,设置文字颜色,设置文字字体格式(ttf)-45位大小写字母,数字-5点,线,弧形-6放到bytesio,取出来 img.save(f,'p......
  • WebAPI中控制器路由和方法路由的区别
    控制器级别的路由:在控制器级别应用路由意味着所有该控制器中的操作都将遵循指定的路由模板。控制器级别的路由通常用于区分不同的API版本或将相关的操作分组到一个URL路径下。控制器级别的路由可以在控制器类上应用,例如:[Route("api/[controller]")][ApiController......
  • React—组件通信
    一、父传子(Props)父组件可以通过props将数据传递给子组件。这是React中最常见的一种方式,适用于父子组件之间的数据传递。{/*组件传递:父传子*/}{/*1.父组件传递数据子组件标签上绑定属性*/}{/*2.子组件接收数据props(props对象里包含了父组件传......