react-router-dom v6.0新特性及路由守卫

最新推荐文章于 2025-10-19 23:30:07 发布

原创

最新推荐文章于 2025-10-19 23:30:07 发布 · 3.1k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #javascript

react-router-dom v6进行了诸多优化，包括更简洁的路由配置和组件化思想体现。本文介绍了useRoutes的使用，通过Outlet组件简化了路由嵌套，并展示了如何实现路由鉴权，以确保只有经过授权的用户才能访问特定路由。

一、概述

v6相比v5,做了很多的优化。包括书写上更加的便捷，更加体现组件化思想。以往在处理路由嵌套和鉴权方面，v5的写法都靠各自开发人员去实现相对比较参差不齐。一下针对v6的配置做简单的介绍。

二、useRoutes

v6中路由的设置采用hook的方式，有点像vue的router的实例化。

import {useRoutes} from "react-router-dom";
import { Suspense, lazy } from 'react'
const routes = [
  {
    path: '/',
    auth:false,
    component:lazy(() => import('./../page/login/Login'))
  },
  {
    path: '/Portal',
    auth:true,
    component:lazy(() => import('../page/portal/Portal')),
    children: [
      { 
        path: '/Portal/Home',
        auth:true,
        component:lazy(() => import('../page/home/Home'))
      },
      { path: '/Portal/Test/:id',
        auth:true,
        component:lazy(() => import('../page/test/Test'))
      },
      { 
        path: '/Portal/*',
        auth:false,
        component:lazy(() => import('../page/error/NotFound'))
      }
    ]
  },
  { 
    path: '*',
    auth:false,
    component:lazy((