位置: IT常识 - 正文

React中路由的参数传递 - 路由的配置文件(react中路由有哪些常用组件)

编辑:rootadmin
React中路由的参数传递 - 路由的配置文件 文章目录路由的参数传递路由的配置文件路由的参数传递

推荐整理分享React中路由的参数传递 - 路由的配置文件(react中路由有哪些常用组件),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:react路由的原理,react路由传参数,react路由传参数,react路由exact,react项目路由配置,react路由表,react路由表,react中路由有哪些常用组件,内容如对您有帮助,希望把文章链接给更多的朋友!

传递参数有二种方式(需要注意的是, 这两种方式在Router6.x中都是提供的hook函数的API, 类组件需要通过高阶组件的方式使用):

动态路由的方式;

search传递参数(查询字符串);

方式一: 动态路由的概念指的是路由中的路径并不会固定:

比如/detail的path对应一个组件Detail;

如果我们将path在Route匹配时写成/detail/:id,那么 /detail/111、/detail/123都可以匹配到该Route,并且进行显示;

这个匹配规则,我们就称之为动态路由;

React中路由的参数传递 - 路由的配置文件(react中路由有哪些常用组件)

通常情况下,使用动态路由可以为路由传递参数。

配置动态路由render() { return ( <div className='app'> <div className='header'> <Link to="detail/123">详情123</Link> <Link to="detail/321">详情321</Link> <Link to="detail/aaa">详情aaa</Link> </div> <div className='counter'> <Routes> <Route path='/detail/:id' element={<Detail/>}/> </Routes> </div> <div className='footer'>footer</div> </div> )}在跳转的页面中可以通过hook函数useParms获取到传入的id, 由于我们现在使用的是类组件, 无法使用hook函数, 因此需要通过高阶组件对当前组件增强(上一篇刚刚讲过高阶组件的封装, 这里直接使用, 给到大家代码)import { useNavigate, useParams } from "react-router-dom"export default function withRouter(WrapperComponent) { return function(props) { const naviagte = useNavigate() const params = useParams() const router = {naviagte, params} return <WrapperComponent {...props} router={router} /> }}使用高阶组件增强当前Detail组件, 就可以通过useParams获取到传递的idimport React, { PureComponent } from 'react'import withRouter from '../hoc/with_router'export class Detail extends PureComponent { render() { // 获取到params const { params } = this.props.router return ( <div> <h2>Detail</h2> {/* 通过params获取到id并展示 */} <h2>id: {params.id}</h2> </div> ) }}export default withRouter(Detail)

方式二: search传递参数(也就是查询字符串的方式), 这里在User组件中进行演示

在路由跳转时拼接上查询字符串render() { return ( <div className='app'> <div className='header'> <Link to="/user?name=chenyq&age=18&height=1.88">用户</Link> </div> <div className='counter'> <Routes> <Route path='/user' element={<User/>} /> </Routes> </div> <div className='footer'>footer</div> </div> )}查询字符串需要通过hook函数useSearchParams获取, 所以我们也需要使用高阶组件对User组件进行增强// 封装的高阶组件import { useNavigate, useParams, useSearchParams } from "react-router-dom"export default function withRouter(WrapperComponent) { return function(props) { // 1.导航 const naviagte = useNavigate() // 2.动态路由的参数 const params = useParams() // 3.查询字符串的参数 const [searchParams] = useSearchParams() const query = Object.fromEntries(searchParams.entries) const router = {naviagte, params, query} return <WrapperComponent {...props} router={router} /> }}在组件中就可以获取到参数import React, { PureComponent } from 'react'import withRouter from '../hoc/with_router'export class User extends PureComponent { render() { // 获取高阶组件中的query const { query } = this.props.router return ( <div> <h2>User</h2> {/* 通过query获取参数 */} <h2>参数: {query.name}-{query.age}-{query.height}</h2> </div> ) }}export default withRouter(User)路由的配置文件

目前我们所有的路由定义都是直接使用Route组件,并且添加属性来完成的。

但是这样的方式会让路由变得非常混乱,我们希望像vue-router那样, 将所有的路由配置放到一个单独的文件进行集中管理:

在早期的时候,Router并且没有提供相关的API,我们需要借助于react-router-config完成;

在Router6.x中,为我们提供了useRoutes API可以完成相关的配置;

例如我们将下面的映射关系配置到一个单独的文件中

<div className='counter'> <Routes> {/* 当默认路径 / 时, 重定向到home页面 */} <Route path='/' element={<Navigate to="/home"/>}></Route> {/* 配置二级路由 */} <Route path='/home' element={<Home/>}> <Route path='/home' element={<Navigate to="/home/recommend"/>}/> <Route path='/home/recommend' element={<HomeRecommend/>}/> <Route path='home/ranking' element={<HomeRanking/>}/> </Route> <Route path='/about' element={<About/>}/> <Route path='/profile' element={<Profile/>}/> <Route path='/category' element={<Category/>}/> <Route path='/order' element={<Order/>}/> <Route path='/detail/:id' element={<Detail/>}/> <Route path='/user' element={<User/>} /> {/* 当上面路径都没有匹配到时, 显式Notfound组件 */} <Route path='*' element={<Notfound/>}/> </Routes></div>

首先, 使用useRoutes这个API替代原来的Routes和Route组件, useRoutes可以当成一个函数直接使用, 但是只能在函数组件中使用

<div className='counter'> {useRoutes(routes)}</div>

再在route/index.js中对映射关系进行配置

import { Navigate } from "react-router-dom"import Home from '../pages/Home'import About from '../pages/About'import Profile from '../pages/Profile'import Notfound from '../pages/Notfound'import HomeRecommend from '../pages/HomeRecommend'import HomeRanking from '../pages/HomeRanking'import Category from '../pages/Category'import Order from '../pages/Order'import Detail from '../pages/Detail'import User from '../pages/User'const routes = [ { path: "/", element: <Navigate to="/home"/> }, { path: "/home", element: <Home/>, children: [ { path: "/home", element: <Navigate to="/home/recommend" /> }, { path: "/home/recommend", element: <HomeRecommend/> }, { path: "/home/ranking", element: <HomeRanking/> } ] }, { path: "/about", element: <About/> }, { path: "/profile", element: <Profile/> }, { path: "/category", element: <Category/> }, { path: "/order", element: <Order/> }, { path: "detail/:id", element: <Detail/> }, { path: "/user", element: <User/> }, { path: "*", element: <Notfound/> }]export default routes

如果我们对某些组件进行了异步加载(懒加载, 分包处理),那么需要使用Suspense进行包裹:

例如我们对Detail和User进行懒加载(分包处理)

// import Detail from '../pages/Detail'// import User from '../pages/User'const Detail = React.lazy(() => import("../pages/Detail"))const User = React.lazy(() => import("../pages/User"))

并且还需要使用Suspense对组件进行包裹

root.render( <HashRouter> <Suspense fallback={<h3>loading</h3>}> <App/> </Suspense> </HashRouter>)
本文链接地址:https://www.jiuchutong.com/zhishi/293073.html 转载请保留说明!

上一篇:网站百度统计被恶意刷广告的处理方法(百度统计网址)

下一篇:bc命令 数字计算器(ab计数器指令程序)

  • 闽政通怎么打不开(闽政通 没反应)

    闽政通怎么打不开(闽政通 没反应)

  • 红米怎么设置勿扰模式(红米怎么设置勿扰模式接听某个联系人)

    红米怎么设置勿扰模式(红米怎么设置勿扰模式接听某个联系人)

  • wifi开启ap隔离什么意思(无线网设置开启ap隔离什么意思)

    wifi开启ap隔离什么意思(无线网设置开启ap隔离什么意思)

  • office另存为快捷键(office文件另存为的快捷键)

    office另存为快捷键(office文件另存为的快捷键)

  • zoom有回放吗(zoom的回放怎么看)

    zoom有回放吗(zoom的回放怎么看)

  • iphone11电池健康掉的快(Iphone11电池健康87%)

    iphone11电池健康掉的快(Iphone11电池健康87%)

  • 手机qq群电话怎么关麦(手机qq群电话怎么打)

    手机qq群电话怎么关麦(手机qq群电话怎么打)

  • qq最近常听一定准确吗(qq里最近常听要听几遍)

    qq最近常听一定准确吗(qq里最近常听要听几遍)

  • 苹果手机隔空传送不了怎么回事(苹果手机隔空传送一直都在等待中)

    苹果手机隔空传送不了怎么回事(苹果手机隔空传送一直都在等待中)

  • 腾讯会议能分屏吗(腾讯会议能分屏吗苹果手机)

    腾讯会议能分屏吗(腾讯会议能分屏吗苹果手机)

  • 苹果6shome键坏了能修吗(苹果6shome键坏了怎么解锁)

    苹果6shome键坏了能修吗(苹果6shome键坏了怎么解锁)

  • 电脑微信声音怎么关闭(电脑微信声音怎么设置大小)

    电脑微信声音怎么关闭(电脑微信声音怎么设置大小)

  • 华为荣耀手机怎么关机(华为荣耀手机怎么解锁密码忘了)

    华为荣耀手机怎么关机(华为荣耀手机怎么解锁密码忘了)

  • 微信即刻视频是什么(微信即刻视频是什么意思)

    微信即刻视频是什么(微信即刻视频是什么意思)

  • 如何给软件上锁(如何给软件上锁?)

    如何给软件上锁(如何给软件上锁?)

  • powerpoint是哪个公司的产品(powerpoint叫什么)

    powerpoint是哪个公司的产品(powerpoint叫什么)

  • 搜索快捷键ctrl加什么(搜索快捷键是什么)

    搜索快捷键ctrl加什么(搜索快捷键是什么)

  • 苹果11系列屏幕大小对比(苹果11系列屏幕多少寸的)

    苹果11系列屏幕大小对比(苹果11系列屏幕多少寸的)

  • 抖音怎么看哪些人看过我的作品(抖音怎么看哪些人取关了自己)

    抖音怎么看哪些人看过我的作品(抖音怎么看哪些人取关了自己)

  • 鲲鹏920干啥用的(鲲鹏920 spec)

    鲲鹏920干啥用的(鲲鹏920 spec)

  • 京东app取消退款在哪里(京东商城取消退款申请)

    京东app取消退款在哪里(京东商城取消退款申请)

  • 华为lnd一al30是什么型号(华为lnd-al30是什么型号)

    华为lnd一al30是什么型号(华为lnd-al30是什么型号)

  • 小米9和小米9透明版有什么区别(小米9和小米9透明版参数对比)

    小米9和小米9透明版有什么区别(小米9和小米9透明版参数对比)

  • 华为畅享9指纹锁在哪(华为畅享9指纹锁设置怎么不见了)

    华为畅享9指纹锁在哪(华为畅享9指纹锁设置怎么不见了)

  • Drömling湿地中的灰鹤,德国 (© Mike Friedrichs/Getty Images)

    Drömling湿地中的灰鹤,德国 (© Mike Friedrichs/Getty Images)

  • 所得税的记账凭证
  • 机票抵扣进项税怎么填申报表
  • 销售分哪几类
  • 个体户需要做利润分析吗
  • 在途物资什么科目
  • 提存计划和受益计划选那个
  • 税务季报利润表的本年累计可以更改吗
  • 免征企业所得税的有
  • 租地建厂房合同
  • 建筑业预收账款如何缴税
  • 公司用股东的钱交税吗
  • 退还增值税留抵税额是什么政策
  • 超市顾客返利如何做账务处理?
  • 公司购买工装计入什么费用
  • 以前的固定资产现在做账怎么入账
  • 溢价收购全资子公司股票
  • 工程完成投资入什么科目核算与怎么写其会计分录?
  • 基金公司管理费收入怎么入账
  • 学校提供场地开发方案
  • 以前年度企业所得税申报表怎么查
  • 招商引资政府返税政策不兑现
  • 增值税差额征收企业所得税主营业务收入应按什么计入
  • 减少子公司合并的风险
  • 已开发票发生销售退回如何做账?
  • 预付的货款的发票在哪里
  • 融资租赁和经营租赁哪个更常见
  • 电脑取消共享文件夹
  • IE浏览器如何取消全屏
  • 已付货款没有发票能做支出吗
  • 企业事业单位应当采取有效措施
  • 公司所有费用都让一人报销
  • 计提本月固定资产折旧会计科目
  • PHP:shell_exec()的用法_命令行函数
  • php检测字符串长度
  • phpcms添加内容
  • 有进项税额转出怎么做账
  • 销售货款无法收到怎么办
  • 企业的业务招待费是否可以随意开支
  • 受托加工收到的材料怎么入账
  • 教育费附加免征额
  • 个体工商户城市维护建设税
  • Vite + Vue2 + Vuetify2 + <script setup> + TypeScript 搭配开发项目
  • 关于转租电费收取规定
  • 境外汇款收款人承担手续费
  • 其他应付款包括应付股利和应付利息吗
  • 小规模纳税人有几种税率
  • 其他债权投资应收利息计入什么
  • 先开票未发货要确认收入吗
  • 固定资产丢失进哪个科目
  • 关于赠品的财务处理
  • 高新企业如何做账
  • 差旅费报销金额怎么算
  • 资产负债表日后非调整事项应当在附注中披露
  • 汇算清缴弥补以前年度亏损多少年
  • 账实不符怎么调账
  • 工会经费应计入
  • 企业组织结构的本质是
  • 余额调节表怎么填写例题
  • 收到是怎么写
  • Win10 Mobile 10536预览版用得越久越卡顿是怎么回事?
  • Windows Server 2008脱机文件配置攻略
  • WINDOWS操作系统最新版本
  • Linux系统安全管理的内容包括
  • winxp如何删除网卡驱动
  • win7不能运行应用程序的方法
  • 关闭windows输入法
  • win10升级失败怎么办
  • win 7电脑音箱没有声音
  • win8怎么到win7
  • Win10 Mobile 10586.164上手体验视频评测
  • cocos2d-x教程
  • 常用的批处理文件
  • jquery加载函数
  • js中排序的函数
  • unity 内存管理
  • 快速解决偏头痛的6个方法
  • 怎么查询高速路封闭和开通
  • 安徽省国家税务局网
  • 公司完税证明去哪里开具
  • 国税局黑龙江省
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设