位置: IT常识 - 正文

React 路由v6 - 超全详解(react 路由参数)

编辑:rootadmin
React 路由v6 - 超全详解 React router v6 路由

推荐整理分享React 路由v6 - 超全详解(react 路由参数),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:react路由配置菜鸟教程,react路由详解,react 路由参数,react路由配置菜鸟教程,react两种路由的区别,react路由配置菜鸟教程,react路由配置菜鸟教程,react路由exact,内容如对您有帮助,希望把文章链接给更多的朋友!

已经习惯了 v5 版本的路由 ,那么 v6 版本的路由 该怎么应用呢?

文章目录React router v6 路由Ⅰ、路由 v6 (两种形式)Ⅱ、 动态路由Ⅲ、路由重定向Ⅳ、路由跳转 (两种形式)Ⅴ、路由懒加载Ⅰ、路由 v6 (两种形式)

方案一 : ( 不推荐 )

通过标签 嵌套 标签 的形式通过 Routes 为 包裹 Route 标签的形式

例 : 用法 👇

import { Route,Routes,BrowserRouter } from "react-router-dom";import Page1 from '../view/Page1'import Page2 from '../view/Page2'import Page404 from '../view/Page404'function App() { <BrowserRouter> <Routes> <Route path='/page1' element = {<Page1 />} /> <Route path='/page2' element = {<Page2 />} /> <Route path='*' element = {<Page404 /} /> <Routes> <BrowserRouter>}export default App;需要添加子路由 就继续嵌套要在 <Page1 /> 组件下 放入 <Outlet /> => 【确定子路由出现的位置】

例 : 子路由 👇

<Route path='/page1' element = {<Page1 />} ><Route path='/page1/test1' element = {<Test1 />} /><Route path='/page1/test2' element = {<Test2 />} /></Route>

方案二 :( 推荐 )

通过 react 17 之后推出的 hooks -> useRoutes这个 hooks ,看起来更像 vue 的路由配置,而不是堆组件的形式。

例 : App.jsx 👇

import { BrowserRouter} from "react-router-dom";import Element from './routes'function App() { return ( <BrowserRouter> <Element /> </BrowserRouter> )}export default App;

例 : 路由配置 /routes/index.jsx 👇

import { useRoutes } from "react-router-dom";import Page1 from '../view/Page1'import Page2 from '../view/Page2'import Page404 from '../view/Page404'function Element() { const element = useRoutes([ { path: '/page1', element: <Page1 /> }, { path: '/page2', element: <Page2 /> }, { path: '*', element: LazyLoad('/view/404') } ]) return (element);}export default Element;子路由可以通过 children 来嵌套实现;注意放子路由的地方同样要,再加个 <Outlet /> 来确定子路由的位置;

例 : 子路由 👇 (如下 <Page1/> 中要加个<Outlet />)

...{ path: '/page1', element: <Page1 /> children: [ { path: '/page1/aaa', element: <Aaa /> }, { path: '/page1/bbb', element: <Baa /> } ]}...Ⅱ、 动态路由React 路由v6 - 超全详解(react 路由参数)

动态路由的作用 ,就是达到路由自定义传参的作用;

① 绑定参数 方案一 : ( 组件形式 创建的路由)

<Route path = '/page1/:content' element = {<Page1 />} />

方案二 :(useRoutes 创建的路由)

...{path: '/page1/:content', element: <Page1 />},...

② 接收参数

接收的时候通过useParams钩子去接收

import {useParams} from 'react-router-dom';export default function Detail(props){ let { content } = useParams(); return( <div></div> )}Ⅲ、路由重定向

方案一 : ( 通过 Navigate API)

import { Navigate} from "react-router-dom";...{ path: '*', element: <Navigate to='/page404'/>},...

方案二 :( 自己封装 ) 例 : 封装一个组件 👇

import React,{useEffect} from 'react'import {useNavigate } from 'react-router-dom'export default function Redirect(props) { const navigate = useNavigate(); useEffect(()=>{ navigate(props.to,{replace:true}) }) return null}

例 : 使用:👇

import Redirect from './Redirect'{ path: '*', element: <Redirect to='/page404'/>},Ⅳ、路由跳转 (两种形式)

方案二 : ( 标签类型 : 和上面的 路由重定向 一样 )

import {NavLink} from 'react-router-dom'function Index() {return (<ul><li><NavLink to='page1'> 页面1 </NavLink></li><li><NavLink to='page1'> 页面2 </NavLink></li></ul>)}

方案二 : ( 方法类型 )

import { useNavigate } from 'react-router-dom'function Index() {return (<ul><li onClick={() => { useNavigate('/page1') }}>页面1</li><li onClick={() => { useNavigate('/page2') }}>页面2</li></ul>)}Ⅴ、路由懒加载

1、路由懒加载,对与 性能 来说是一个非常好的 优化点 ; 2、只有在进入该路由的时候才,去 按需加载 对应的,而不是一次性去加载全部; 3、通过 React.lazy 方法来懒加载 ; 4. 同时可以通过React.Suspense 的 fallback方法 去展示 加载中 的效果 ;

例 : 封装例子 👇 ( 同时更加简便导入 )

import { useRoutes } from "react-router-dom";import React from 'react';const LazyLoad = (path) => { //传入在view 下的路径 const Comp = React.lazy(() => import(`../view${path}`)) return ( <React.Suspense fallback={<> 加载中...</>}> <Comp /> </React.Suspense> )}function Element() { const element = useRoutes([ { path: '/page1', element: LazyLoad('/Page1') }, { path: '/page2', element: LazyLoad('/Page2') } ]) return (element);}export default Element;

本文链接地址:https://www.jiuchutong.com/zhishi/295976.html 转载请保留说明!

上一篇:vue中播放rtsp流(vue 播放视频流)

下一篇:vue3中前端处理不同数据结构的JSON(vue前端开发常见问题)

  • 小微企业城建税优惠政策2023
  • 什么叫应纳税所得额
  • 固定资产处置损益怎么算
  • 简易计税是什么税种
  • 提现的手续费怎么做账
  • 生产企业退税计算方法怎么选择
  • 进口消费税为什么一定要组价
  • 附加税费申报表出不来数据
  • 工业企业库存商品的初始入账成本
  • 建筑企业劳务工资必须要开劳务发票吗?
  • 代开的增值税专用发票应怎样填写?
  • 远期采购合同会查吗
  • 行政事业单位的会计核算可以采用权责发生制吗
  • 非正常损失会计利润调整
  • 加工费发票可以不开数量吗
  • 行政事业单位拨入经费
  • 生产企业原材料的订购与运输论文
  • 非正常原因导致的存货盘亏或毁损非正常原因是哪些
  • 人力资源外包差额计税税率
  • 固定资产报废需要税务备案吗
  • 农产品收购发票是普票还是专票
  • 开票码是什么意思
  • 定期定额个体工商户个人所得税
  • 应交增值税会计科目
  • 房屋抵债如何确定契税计税依据?
  • 公司周年庆典费用计入什么科目
  • 跨年多计提折旧的账务处理
  • 给出含税货款会计分录
  • 外聘老师课时费计入什么科目
  • 户外拓展费用入什么科目
  • 鸿蒙智能充电模式怎么用
  • 广告费和业务宣传费税前扣除基数
  • 为什么申报个人所得税还要补税
  • 固定资产折旧计算方法
  • 如何在windows11上安装动态壁纸
  • 付员工经济补偿金计入工资总额吗
  • php生成随机数字
  • php公众号
  • thinkphp3.2.3缓存漏洞
  • php缓存原理
  • php中header的用法
  • pace框架
  • 解决烧心最快方法
  • 分包工程账务处理
  • 存货的原材料分析
  • 增值税加计抵减企业所得税如何处理
  • 猿创征文,宝藏工具篇
  • 工程补偿款开什么发票
  • 入库税款异常怎么处理好
  • 综合所得个税计算例题
  • 小微企业免征增值税政策2022
  • 城镇土地使用税征收标准及计算方法
  • 不抵扣勾选有什么风险
  • 内账的账务处理
  • 增值税专用发票抵扣期限
  • 政府对企业提交的项目申请报告主要从等方面进行核准
  • 一般纳税人购入固定资产进项抵扣
  • 计提费用账务处理
  • 广告发票能抵扣吗
  • 黄金入账如何做会计分录
  • 差旅费出差补助标准
  • 困难补助属于兜底政策吗
  • mysql 判断
  • mysql在cmd命令操作
  • XP系统提示QQprotect.exe损坏文件的解决方法图文教程
  • window7窗口
  • centos 安装rpm软件包的命令
  • win8windows设置在哪里
  • 退出清理磁盘
  • zlib是什么意思
  • quick cocos2dx-Lua中的自定义事件的使用
  • python 邻接表
  • unity-3d
  • javascript语言介绍
  • shell脚本cut -d
  • javascript基础笔记
  • javascript巧用eval函数组装表单输入项为json对象的方法
  • 公路局有钱吗
  • 退休个人所得税专项附加扣除减免
  • 进项税额转出影响所得税吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设