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

  • 工商网企业信息查询系统是否被列入经营异常名录

    工商网企业信息查询系统是否被列入经营异常名录

  • 怎样摆脱传统模式做网络推广(怎样摆脱传统模型)

    怎样摆脱传统模式做网络推广(怎样摆脱传统模型)

  • 微信直播通知怎么关闭(微信直播通知怎么恢复)

    微信直播通知怎么关闭(微信直播通知怎么恢复)

  • 华为nova4e是几英寸手机(华为nova4是几英寸)

    华为nova4e是几英寸手机(华为nova4是几英寸)

  • 微信视频声音忽大忽小(微信视频声音忽高忽低)

    微信视频声音忽大忽小(微信视频声音忽高忽低)

  • cpu的h是什么意思(cpu后缀字母h)

    cpu的h是什么意思(cpu后缀字母h)

  • poe摄像头可以12v供电吗(poe摄像头可以单独供电吗)

    poe摄像头可以12v供电吗(poe摄像头可以单独供电吗)

  • 一台打印机可以连接几台电脑(一台打印机可以连几个电脑)

    一台打印机可以连接几台电脑(一台打印机可以连几个电脑)

  • 微信可以有几个账号(企业微信可以有几个)

    微信可以有几个账号(企业微信可以有几个)

  • b站改名要多少硬币(b站改名有限制吗)

    b站改名要多少硬币(b站改名有限制吗)

  • 手机激活时间和购买时间不一致(手机激活时间和保修日期有什么关系)

    手机激活时间和购买时间不一致(手机激活时间和保修日期有什么关系)

  • 电脑连接手机热点显示无internet访问权限(电脑连接手机热点无法上网)

    电脑连接手机热点显示无internet访问权限(电脑连接手机热点无法上网)

  • 米6相机的峰值有什么用(小米6相机焦距)

    米6相机的峰值有什么用(小米6相机焦距)

  • 嘀嗒顺风车可以打发票吗(嘀嗒顺风车可以绑定别人的银行卡么)

    嘀嗒顺风车可以打发票吗(嘀嗒顺风车可以绑定别人的银行卡么)

  • mate20能不能无线充电(华为mate20能无线充电么)

    mate20能不能无线充电(华为mate20能无线充电么)

  • 怎么设置airpods触控(怎么设置airpods弹窗)

    怎么设置airpods触控(怎么设置airpods弹窗)

  • 华为gt3什么时候出

    华为gt3什么时候出

  • 删了好友再加回来巨轮还在吗(删了好友再加回来聊天记录还能恢复吗)

    删了好友再加回来巨轮还在吗(删了好友再加回来聊天记录还能恢复吗)

  • 小米的nfc是什么意思(小米的nfc是干什么的)

    小米的nfc是什么意思(小米的nfc是干什么的)

  • 红米note上面出现耳机模式如何取消(红米手机上方有红点怎么回事)

    红米note上面出现耳机模式如何取消(红米手机上方有红点怎么回事)

  • 如何将扫描文件转换成word(如何将扫描文件放在一起)

    如何将扫描文件转换成word(如何将扫描文件放在一起)

  • 荣耀10如何设置锁屏壁纸(荣耀10如何设置返回键)

    荣耀10如何设置锁屏壁纸(荣耀10如何设置返回键)

  • 抖音怎么上传照片(抖音怎么上传照片合集)

    抖音怎么上传照片(抖音怎么上传照片合集)

  • h5游戏是什么(h5游戏在线玩平台)

    h5游戏是什么(h5游戏在线玩平台)

  • 如何解决Win10专业版系统上没有UEFI?(windows10专业)

    如何解决Win10专业版系统上没有UEFI?(windows10专业)

  • 如何设置电源键、笔记本合盖系统响应的操作(如何设置电源键关闭屏幕)

    如何设置电源键、笔记本合盖系统响应的操作(如何设置电源键关闭屏幕)

  • 单臂路由小实验?Switch配置有哪些?(单臂路由实验目的)

    单臂路由小实验?Switch配置有哪些?(单臂路由实验目的)

  • web前端-JavaScript中的函数(创建,参数,返回值,方法,函数作用域,立即执行函数)(Web前端开发用什么软件)

    web前端-JavaScript中的函数(创建,参数,返回值,方法,函数作用域,立即执行函数)(Web前端开发用什么软件)

  • 购买车辆保险的报告
  • 企业成立多久能注销
  • 摊销无形资产商标权计入什么科目
  • 现金存银行会计分录
  • 不认证的发票可以抵扣吗
  • 空调的折旧年限和残值率
  • 购买旧资产如何入账
  • 金税盘年费全额抵扣分录
  • 公司支付宝账户怎么登录
  • 销售货物多收款怎么处理
  • 股东变动及股东情况章节
  • 油品沥青消费税征收范围
  • 增值税普通发票有什么用
  • 优惠购房差价收益是否缴纳个人所得税?
  • 个人储蓄存款利率
  • 购买不需安装的生产设备会计分录
  • 支付工程款不得超60天
  • 小规模收入未达50万
  • 经营租入的土地使用权 待摊
  • 收到老板图片
  • php查找文件目录下文件
  • u盘一键启动安装系统
  • macbook通知中心设置
  • 电商快递费怎么做账
  • 房产产权置换
  • 在php中,什么函数能将数组转化为字符串
  • 银行罚息计入什么会计科目
  • 在白雪覆盖的地方 什么歌
  • 回迁房办理房产证契税怎么交
  • origin2017曲线拟合
  • 梅拉和艾斯德斯
  • 交易性金融资产的入账价值
  • 员工宿舍装宽带
  • 员工旅游是什么意思
  • php微信公众号开源框架
  • 路由vue-router
  • opencv官方教程
  • php 输出
  • 税收返还会计处理办法
  • 企业所得税的计算公式三种
  • 目前功能最强大的手机
  • 销售不动产统一发票怎么没有税率
  • 哪些收入需要缴纳个人所得税
  • 运输公司挂靠车辆的会计处理?
  • 法人股东的分红怎么算
  • 继续教育的相关知识
  • 其他权益工具投资出售时账务处理
  • 应缴财政专户款年末有余额吗
  • 物流辅助服务包含哪些内容
  • 年终零余额账户额度和收入相等吗
  • 事业单位零余额账户使用流程
  • 公司与公司之间人与人之间最大的区别
  • 同一控制下的企业合并和非同一控制下的企业合并的区别
  • 怎么设置账簿
  • linux重置开机密码
  • sqlserver中存储过程
  • sql server触发器的编写与使用
  • win2003设置网络共享
  • ubuntu16连接wifi步骤
  • mac如何切换界面 快捷键
  • incomp.file ver什么意思
  • cygwin下载教程
  • centos禁止ip访问
  • windows xp无法访问samba共享夹
  • centos怎么打开软件
  • 高危KB3045645!Win7/8.1别安装这个补丁
  • win7如何打开浏览器
  • Win10 Mobile 10586正式版即将向Insider用户推送
  • glUnmapBuffer
  • 简单解析空中三角测量的意义
  • jquery时间轴插件
  • nodejs用法
  • cocos2d怎么用
  • vue框架写淘宝购物车
  • python tkinter tabview
  • 防止sql注入php
  • 关于减肥的好方法
  • 浅析jQuery Ajax通用js封装
  • 地税登记证和税务登记证是一样的吗
  • 依法行政的观念
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设