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

  • 地方税概述?
  • 业务宣传费和广告费的扣除标准
  • 挂靠到运输公司的车转让给个人如何交增值税
  • 什么是存货周转率?存货周转率的意义是什么
  • 材料费发票税点
  • 微信收入算现金流出吗
  • 所得税的账务处理流程
  • 间接费用分配方法不包括哪些
  • 专利奖励金额
  • 季度申报利润表本月数怎么填
  • 管理费用福利费和应付职工薪酬福利费区别
  • 股权出让需要交税吗
  • 个人房屋租金收入怎么交税
  • 处置固定资产增值税和所得税报税能一致吗
  • 公司转让房产如何交税
  • 研发费用加计扣除留存备查资料
  • 传媒公司发传单
  • 小规模纳税人出租房屋增值税税率是多少
  • 试分析营改增的重大意义
  • 公对公转账需要多久到账
  • 外币折算差额怎么记账
  • 企业牌照拍卖收入计入什么科目
  • 个税贷方余额比实际金额多
  • 整体购买企业资产涉及哪些税
  • 国际收款产生的手续费账务处理
  • 设计费计入成本
  • 软件产品即征即退申请表
  • 除了电脑杀毒软件还有啥
  • 偷渡者视频
  • php 字符串函数
  • 房地产企业所得税预提成本10%
  • 消防工程改造方案
  • 公司转让债务债权协议
  • 在产品定额工时怎么算
  • 固定资产八大类别
  • axios有哪些常用方法
  • sql代码大全
  • php路由教程
  • 存货需要计算填列吗
  • 详解16型人格
  • 营业额增长率公式
  • 什么是附加税举个例子
  • 研发费用的会计处理方法
  • 如何准确理解nosql的含义?
  • 专利年费可以做研发费用吗
  • 商品流通企业流程图
  • 查询sqlserver数据库开发这门课程的最高分
  • 其他应付什么意思
  • 高新技术企业核心人才保险
  • 应收账款的明细科目一般按照什么设置
  • 计提五险一金如何做分录
  • 第三方平台佣金账务处理
  • 债券分期付息到期还本的意思
  • 以前年度应付款少记怎么入账
  • 单位要处置一辆车怎么办
  • 怎么辨别定额发票是什么项目啊
  • 其他综合收益转出
  • 收到个人退回的社保费,怎样做分录
  • 暂估应付账款余额在贷方
  • 建筑企业其他业务收入范围
  • mysql数据库迁移到达梦
  • mysql字符串类型有哪些
  • win10如何设置快捷键
  • 装了ntfs for mac os后找不到磁盘了
  • 32.exe 什么病毒
  • linux命令统计代码行数
  • kpg是什么文件
  • win7系统更新怎么关闭
  • 查找linux
  • 可用分区az
  • linux root 密码忘了怎么办
  • windows运行nodejs
  • a*算法的优缺点
  • nginx1.16安装
  • vue-cli使用
  • jquery怎么给文本框赋值
  • easyui表格
  • 河南省税务总局网站官网
  • 广东省社保缴费基数
  • 怎么查询车船税缴费记录
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设