位置: 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计数器指令程序)

  • 所得税调增调减项目有哪些
  • 母公司合并子公司会计处理
  • 带薪年假是入职就有还是要等一年以后
  • 财务要做哪些表
  • 车位销售技巧
  • 财务台账包含什么
  • 公司的纳税信用等级对财务人员有什么影响
  • 金税盘服务费不能全额抵扣吗
  • 企业股利分配政策有哪些
  • 税前扣除的职工福利费标准
  • 低值易耗品摊销借贷方向
  • 以前年度已交增值税额
  • 代开专用发票缴纳的增值税需要计提吗?
  • 小额贷款公司可以跨区域经营吗
  • 电子承兑汇票接收时间是多久
  • 快速查看财务费用借贷有误的方法
  • 确认无法回收的应收账款会计分录
  • mac文件怎么用
  • linux安装常用命令
  • 可以关闭系统的快捷键
  • 产品销售账务处理办法
  • 汇付的注意事项有哪些内容
  • negro 什么意思
  • 最早的手机是哪一年
  • 阿里云搭建hexo
  • 补交上年度增值税附加税,怎么做账
  • vue.js mvvm
  • 现金折扣的账务处理最新规定
  • 西部大开发税收优惠政策是什么时候开始的?
  • auto.js 教程
  • echarts series name
  • 织梦好用吗
  • 工资计提发放会计科目
  • mongodb使用场景 简书
  • 生产企业免抵退税实例
  • 给离职员工买社保的风险
  • 一般纳税人简易征收最新政策
  • 仓库出入库账本怎么做
  • 增值税是否计入在建工程
  • 小规模纳税人税收政策2023
  • 企业向个人的借款合同
  • 劳务发票税率最新标准
  • 电子发票怎么知道发票代码
  • 长期股权投资稀释股权
  • 普通发票开具红字发票后发票联怎么处理?
  • 固定资产清理会计处理
  • 应收账款周转率分析
  • 发放工资时社保为什么计入其他应付款科目
  • 注册资金多少对公司有什么影响
  • 电费发票未到怎么入账
  • 技术服务费会计处理
  • 现金日记账和银行存款日记账必须逐日结出余额
  • 银行汇票如何兑现金
  • 什么是分表分库
  • Windows Server 2016技术第三预览版10537英文版ISO镜像下载泄露
  • windowsxp锁屏密码怎么设置
  • arp攻击的原理及防范
  • linux使用pip
  • ssh debian
  • puppet部署
  • 如何使用升级助力器
  • Win7打印机安装
  • linux sleep命令有什么用
  • windows 8.1 (multiple editions)
  • 5.2光源
  • python 如何生成随机数
  • opengl怎么学
  • Android 判断是否打开了微信
  • linux中gzip的用法
  • JavaScipt中Function()函数的使用教程
  • 安卓手机管家
  • python 解析算法
  • 曲剧全场戏双玉蝉
  • bootstrap怎么用
  • 简述javascript原型和原型链有什么特点?
  • javascript面向对象编程指南第三版
  • Android之Broadcast与BroadcastReceiver
  • 基于javascript创建导航页面
  • 三证合一 税务
  • 小规模纳税人的增值税怎么计算
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设