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

  • 安装服务费增值税专票税率多少
  • 预缴增值税后隔多久缴纳
  • 合并报表存货增值如何做账
  • 来料加工出口免税不退税
  • 利润表的上期金额是指全年吗
  • 减半征收的印花税缴纳所得税吗
  • 煤炭企业会计制度
  • 事业单位过节发东西
  • 对外报价时应考虑哪些因素
  • 转让法人要注意什么
  • 印花税少于1元怎么处理
  • 建筑行业包含哪些项目
  • 公司购买的商品给别的企业用了,企业所得税能列支吗
  • 向客户的续期相关通知
  • 进项税额暂不转出情况说明怎么写
  • 差旅费补助计入什么科目
  • 调整以前年度应付工资怎么调
  • win11如何启用远程访问
  • 中小企业的界定标准是什么
  • 计划成本是什么科目
  • 出租方的维修义务
  • tersafe.dll
  • 异地工程预缴增值税怎么计算
  • 如果工地老板拖欠工资怎么办
  • win11怎么双击直接打开程序
  • php traits
  • php如何上传1个g以上的文件
  • 海恩斯科普简介
  • 待安置期间生活补助费多少钱
  • 小规模纳税人什么意思
  • 员工买机票公司会知道吗
  • etc电子发票需要多久才能开
  • 购买方如何开具红字发票给销售方
  • 生育保险断缴后果
  • 车船税酌定减免
  • 代扣代缴完税凭证抵扣期限
  • 印花税报少了交税了怎么办
  • sqlserver数据库大小于对索引有影响吗?
  • sqlserver 恢复数据库
  • 调整以前年度少计收入
  • 电子税务局实名核验失败
  • 部门召开会议
  • 公司市场部门有什么职位
  • 发工资摘要没写工资
  • 公司新装宽带怎么安装
  • 村集体经济组织架构
  • 如何理解预付年金终值期数和系数和记忆方法
  • 车属于固定资产嘛
  • sql整型
  • sql server中的文件位置可以很灵活
  • wind怎么申请
  • window如何恢复系统
  • win8系统打开苹果系统文件
  • 关闭win10操作系统,相当于
  • mac电脑技巧
  • 如何重装edge
  • linux带桌面
  • hosts文件位置在哪
  • centos怎么打开软件
  • 微软撤回快捷键
  • Win7系统怎么打开文件后缀名
  • win8打游戏
  • win7怎么打开磁盘管理器
  • unity3ds
  • cocos2d教程
  • cocos2djs
  • Unity Spine Skeleton Animation 2D骨骼动画 For Game 介绍
  • opengl画简单图形
  • javaScript事件机制兼容【详细整理】
  • Node.js中的事件循环是什么
  • js获取父窗口
  • jquery原理解析
  • jquery attr和prop
  • jquery数据绑定
  • 浅谈自己对教育的理解
  • 对于初学者的鼓励
  • python编程输出汉字
  • 东营市税务局领导分工
  • 河南洛阳医疗保险电话
  • 公民海外收入纳税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设