位置: 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字符串变量
  • 给实习生发放工资怎么纳税?
  • win7旗舰版系统怎么样
  • 电脑开机按f8出现please select
  • vue前端开发规范
  • Stable Diffusion 准确绘制人物动作及手脚细节(需ControlNet扩展)
  • 生产企业放假前的安全提示
  • react by
  • 卡格拉河
  • php连接mysql数据库的几种方式及区别
  • vue叠化在哪里
  • php如何连接sql server
  • 猿创设计科技有限公司
  • css教程网站
  • java开源二次开发平台
  • php写一个简单的单例模式
  • 母子公司资产划转的涉税问题
  • 企业收取的罚款需要交企业所得税吗
  • 税率开错了会影响贷款吗
  • 增值税专用发票上注明的价款含税吗
  • sql2008r2安装教程
  • win7系统安装教程不用u盘
  • mysql的性能优化方案有哪些
  • 经营性应收项目的减少调增 为什么是减
  • 有形动产租赁属于经营租赁吗
  • 政府补助收入的会计处理
  • 企业成本核算项目以及成本核算流程
  • 小规模纳税人销售自己使用过固定资产
  • 土地使用税为什么要交
  • 虚开发票但是没有成本如何做账?
  • 营业收入就是开票的不含税金额吗
  • 政府征税再进行补贴对消费者福利的影响
  • 企业筹建期的开办费后期怎么算
  • 公司员工报销油费
  • 加油费不征税发票可以报销吗
  • 关于端午节福利发放的通知(通知公告)
  • 服装销售怎么做
  • 招标场地费由谁支付
  • 销售已经使用过的固定资产税率
  • 商品流通企业如何控成本
  • mysql删除方法
  • supervisor.sock refused connection
  • mysql索引实战
  • freebsd软件包
  • xbox无法连接无线网络
  • windows自带的碎片整理程序
  • linux系统怎么复制文件到u盘
  • 贝塞尔曲线pr怎么用
  • 如何解决android代码红线
  • javascript怎么用
  • real interval
  • jquery插件ajaxupload实现文件上传操作
  • 在javascript中用下面哪个关键词来定义变量
  • Python中字符串的索引
  • 公司加油卡充值需要带什么
  • 河南车船税收费标准图片
  • 个人租车收入如何缴纳个人所得税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设