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

  • 华为nova9pro屏幕触控采样率是多少(华为nova9pro屏幕分辨率)

    华为nova9pro屏幕触控采样率是多少(华为nova9pro屏幕分辨率)

  • mrjn2ch是ipad几(mrjp2ch/a是ipad几)

    mrjn2ch是ipad几(mrjp2ch/a是ipad几)

  • 淘宝发不了图片给卖家(淘宝发不了图片给卖家怎么设置)

    淘宝发不了图片给卖家(淘宝发不了图片给卖家怎么设置)

  • 微博播放视频只放声音(微博视频只有自己能看见别人看不见)

    微博播放视频只放声音(微博视频只有自己能看见别人看不见)

  • 电子邮件中@后面的部分是(电子邮件后面是啥)

    电子邮件中@后面的部分是(电子邮件后面是啥)

  • 电话卡可以换身份证吗(电话卡可以换身份证实名吗)

    电话卡可以换身份证吗(电话卡可以换身份证实名吗)

  • 苹果a1530是什么型号(苹果a1530是什么型号多少钱)

    苹果a1530是什么型号(苹果a1530是什么型号多少钱)

  • 苹果手机测量长度的功能在哪里(苹果手机测量长度功能)

    苹果手机测量长度的功能在哪里(苹果手机测量长度功能)

  • 打印机删除后刷新又出来了(打印机删除后刷新又出来了,怎样删除)

    打印机删除后刷新又出来了(打印机删除后刷新又出来了,怎样删除)

  • 快手ld是什么意思(快手id是啥意思)

    快手ld是什么意思(快手id是啥意思)

  • 磁盘id和硬盘序列号一样吗(硬盘id和磁盘id)

    磁盘id和硬盘序列号一样吗(硬盘id和磁盘id)

  • win10卡顿现象严重(win10卡是怎么回事)

    win10卡顿现象严重(win10卡是怎么回事)

  • 微信怎么加密防止别人查看(微信怎么加密防止别人查看vivo手机)

    微信怎么加密防止别人查看(微信怎么加密防止别人查看vivo手机)

  • 怎么获得铁粉标志(铁粉在哪里看)

    怎么获得铁粉标志(铁粉在哪里看)

  • iphonexr好久实体店发售(iphonexr实体店多少钱2021)

    iphonexr好久实体店发售(iphonexr实体店多少钱2021)

  • iphone6s人像模式在哪(iphone6s人像模式怎么开)

    iphone6s人像模式在哪(iphone6s人像模式怎么开)

  • ipad软件都是收费的吗(苹果平板里面的app都收费吗)

    ipad软件都是收费的吗(苹果平板里面的app都收费吗)

  • ipad a1822是什么机型(ipad a1822是什么型号)

    ipad a1822是什么机型(ipad a1822是什么型号)

  • w10怎么切换登录账号(windows10怎么切换用户)

    w10怎么切换登录账号(windows10怎么切换用户)

  • 打印机a4纸怎么设置(打印机a4纸怎么选)

    打印机a4纸怎么设置(打印机a4纸怎么选)

  • 手机倒充电怎么回事(手机倒充电怎么恢复)

    手机倒充电怎么回事(手机倒充电怎么恢复)

  • 欧太力密码锁忘记密码怎么办(欧太力密码锁打不开怎么办)

    欧太力密码锁忘记密码怎么办(欧太力密码锁打不开怎么办)

  • 全民k歌怎么和指定好友合唱(全民k歌怎么和抖音直播同步)

    全民k歌怎么和指定好友合唱(全民k歌怎么和抖音直播同步)

  • Win7、Win8系统文件夹内图片不能预览的原因(win7的文件系统)

    Win7、Win8系统文件夹内图片不能预览的原因(win7的文件系统)

  • Linux 系统内核的调试详解(linux内核有什么作用)

    Linux 系统内核的调试详解(linux内核有什么作用)

  • zabbix_agentd命令  Zabbix客户端守护程序(zabbix 执行命令)

    zabbix_agentd命令 Zabbix客户端守护程序(zabbix 执行命令)

  • 税务局三师有什么用
  • 进项税额抵扣计算
  • 金蝶利润表没有数据怎么办
  • 部分红冲的发票怎么开
  • 机票的电子发票和行程单有什么区别
  • 会计忘记申报税款会有什么影响
  • 一般纳税人减免增值税政策
  • 知识产权局专利审查协作中心
  • 劳务公司代发工资合法吗
  • 土地使用权价格计算公式
  • 进口材料海关到港
  • 学校付学生的现金奖励入什么科目
  • 机构账户炒股是卖出后缴税么
  • 调拨入库的固定资产是否缴税?
  • 非企业所得税税率
  • 资产减值损失进利润表吗
  • 去年增值税销项少2元
  • 怎么分辨是否清真食品
  • 报税提示您可能缺少相关组件怎么处理
  • 股票交易的印花税和手续费是多少
  • 融资租赁到期后资产归属
  • 罕见病药品进口要求
  • win11前面板耳机没声音
  • 3%减按2%征收增值税政策
  • 产品成本的计算过程也就是各种费用界限的划分过程
  • win11有什么升级
  • vue3的生命周期
  • 违约金列支
  • 长期借款还款
  • 工会经费如何在网上购物吗
  • wordpress是开源吗
  • 建筑劳务费发票有进项抵扣吗
  • 个人出租车辆交税吗
  • python读取TXT文件代码
  • 哪些企业可以开13点税票
  • 银行承兑汇票收费标准
  • 帝国cms怎么增加子栏目
  • 租店铺需要什么流程需要注意什么事项?
  • 如何用织梦在本地搭建网站
  • 预提费用会计科目
  • 个税申报数据有误
  • 抵扣进项税额是啥意思
  • 平台的分销佣金是多少
  • 税控盘减免税款冲减管理费用
  • 差旅费科目设置
  • 资产减值损失的科目编码
  • 预付工程款该怎么记账
  • 中小微企业有哪些企业
  • 其他业务收入的二级科目
  • 其他业务收入的附加税的会计分录
  • 收入可以直接转成本吗?
  • 怎么取最大值函数
  • 进项发票超过期限不认证怎么办
  • 小企业会计怎么做账
  • mysql安装配置教程5.7.25
  • windows installation disc
  • ubuntu20开机自启动
  • 苹果电脑优酷视频播放不了
  • linux datetime命令
  • centos7 cp
  • win7诊断策略服务未运行是电脑问题还是网络
  • 苹果电脑Mac系统版本所对应的数字
  • linux xim
  • 免费获取验证码
  • windows7 usb
  • win10如何设置时间和日期
  • windows7系统下给WORD2010设置打开密码的方法
  • 举例说明什么是判断
  • jquery时间戳转换日期格式
  • unity视频播放
  • JavaScript中的变量名不区分大小写
  • unity3d中用四元数 Quaternion来对一个坐标点进行旋转的初步体会
  • jquery 滑动显示
  • python运行flask
  • 2006年发生哪一些大案
  • 医院电子发票怎么查
  • 中华人民共和国成立于1949年10月1日到今年是多少周年
  • 种花需要
  • 河北省电子税务局手机登录入口
  • 12366国税网上申报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设