位置: 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前端开发常见问题)

  • 捕鱼达人游戏需要花钱吗(扑鱼达人游戏)(捕鱼达人游戏是怎样的机制)

    捕鱼达人游戏需要花钱吗(扑鱼达人游戏)(捕鱼达人游戏是怎样的机制)

  • 腾讯课堂可以后台播放吗(腾讯课堂可以提前进入吗)

    腾讯课堂可以后台播放吗(腾讯课堂可以提前进入吗)

  • 苹果电池小插件找不到怎么办(苹果电池小插件怎么关闭)

    苹果电池小插件找不到怎么办(苹果电池小插件怎么关闭)

  • 微信etc扣款设置(微信etc扣款设置在哪里)

    微信etc扣款设置(微信etc扣款设置在哪里)

  • 手机的重量一般多少克(手机的重量一般是多少g)

    手机的重量一般多少克(手机的重量一般是多少g)

  • 可以在多个平台抢票吗(可以在多个平台直播吗?)

    可以在多个平台抢票吗(可以在多个平台直播吗?)

  • 荣耀5i手环第一次充电没反应(荣耀手环5i使用视频)

    荣耀5i手环第一次充电没反应(荣耀手环5i使用视频)

  • 怎么看iwatch是第几代(怎么看自己iwatch第几代)

    怎么看iwatch是第几代(怎么看自己iwatch第几代)

  • 手机彩信能发多大的视频(手机彩信最多发多大)

    手机彩信能发多大的视频(手机彩信最多发多大)

  • iphone11下巴宽度多少毫米(苹果11下巴多宽)

    iphone11下巴宽度多少毫米(苹果11下巴多宽)

  • oppo手机媒体声音突然没有了怎么办(OPPO手机媒体声音小怎么解决)

    oppo手机媒体声音突然没有了怎么办(OPPO手机媒体声音小怎么解决)

  • 手机qq表情显示不出来(手机qq表情显示怎么设置)

    手机qq表情显示不出来(手机qq表情显示怎么设置)

  • 爱剪辑可以合并视频吗(爱剪辑可以合并音频吗)

    爱剪辑可以合并视频吗(爱剪辑可以合并音频吗)

  • 微信显示对方无法接收(微信显示对方无法接收消息是什么意思)

    微信显示对方无法接收(微信显示对方无法接收消息是什么意思)

  • 华为电话加入黑名单是不是打不进了(华为电话加入黑名单对方)

    华为电话加入黑名单是不是打不进了(华为电话加入黑名单对方)

  • 移动卡无服务怎么解决(移动卡无服务怎么查询)

    移动卡无服务怎么解决(移动卡无服务怎么查询)

  • 小米本地备份有什么用(小米的本地备份)

    小米本地备份有什么用(小米的本地备份)

  • 天猫极速退款额度在哪里看(天猫已经极速退款了还能撤销退款申请吗)

    天猫极速退款额度在哪里看(天猫已经极速退款了还能撤销退款申请吗)

  • 电脑掩码怎么查(怎么查电脑子网掩码)

    电脑掩码怎么查(怎么查电脑子网掩码)

  • 抖音作品审核中怎么回事(抖音作品审核中怎么回事 赶紧隐藏)

    抖音作品审核中怎么回事(抖音作品审核中怎么回事 赶紧隐藏)

  • 开发app常见的错误有哪些(开发app的难点)

    开发app常见的错误有哪些(开发app的难点)

  • 一号店如何申请退款(1号店怎样)

    一号店如何申请退款(1号店怎样)

  • IDEA 创建Maven Web项目(idea 创建maven项目读取pom报错)

    IDEA 创建Maven Web项目(idea 创建maven项目读取pom报错)

  • 个人所得税计提和发放分录
  • 应付账款应收账款
  • 财政部监制的收据可以手写吗
  • 增值税专用发票抵扣期限
  • 无形资产价值评估收费
  • 实收资本何时交税
  • 残疾人就业保障金申报时间
  • 债权投资减值的账务处理
  • 营业外支出怎么结转本年利润
  • 小规模应交的增值税
  • 企业所得税季报可以更正吗
  • 国有企业党组织工作应遵循的原则包括
  • 研究开发费用的归集
  • 转账支票支付购货款填制什么凭证
  • 剩余折旧月份
  • 购买未完工的厂房会计分录
  • 入账发票是什么意思
  • 出售固定资产未收款账务处理
  • 总公司与分公司的账务处理销售
  • 开发企业售楼处工作内容
  • 公司基本账户冻结怎么办
  • 税前扣除是好事吗
  • 清算后土增税缴纳计算
  • 已核销的应收账款
  • 出口企业免抵退是什么意思
  • win10打开第二个桌面快捷键
  • 银河麒麟操作系统价格
  • 开发产品转作经营性资产
  • 月末结转未分配利润吗
  • 深度学习模型精度fp16和fp32
  • win10任务栏隐藏正在运行的程序
  • 笔记本电池保养注意事项
  • php反射使用场景
  • 政府奖励怎么做账
  • 总额法的会计分录
  • 工行对公贷款利息扣除时间
  • php接收post数据并查询数据库
  • 蓝桥杯大赛官网试题
  • ai 绘画原理
  • pyqt5如何安装
  • 什么是微前端
  • php禁用system用什么绕过
  • 报关单运费cny
  • 企业合并财务报表项目有哪些
  • 筹办期发生业务怎么办
  • 破产审计需要几年的账
  • 主管盾和制单盾是是转账使用的U盾吗?
  • sql优化口诀
  • db2 -952
  • 为什么要加大研发投入
  • 哪些凭证可以作为原始凭证
  • 销售赠品的会计分录
  • 生产企业购进的生产原材料用来装修公司会计处理
  • 货物已到发票未到怎么做账
  • 安装调试费属于劳务还是服务
  • 租赁收入相关的会计准则
  • 公司软件使用制度
  • 记账凭证可以先做贷方吗
  • 企业管理费的计算基础
  • 营改增问题解答
  • 私企需要计提盈余公积吗
  • 获取数据库最新的一条记录
  • fedora 版本
  • cmd命令怎么进入d盘文件夹
  • ikeeperpab.exe是什么
  • win10相机桌面快捷方式
  • mac 释放ip地址命令
  • symtray.exe - symtray是什么进程 有何作用
  • linux内核2.3.20
  • win7安装office2016报错
  • windows 10移动版
  • windows8怎么装
  • windows7 excel
  • 电脑没有网络连接怎么办
  • 安卓实时屏幕
  • js插件推荐
  • 浅谈jquery的应用
  • 企业登录初始密码
  • 税务申报规则
  • 中山市地方税务局官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设