位置: 编程技术 - 正文

React Router基础使用(react-router react-router-dom)

编辑:rootadmin

推荐整理分享React Router基础使用(react-router react-router-dom),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:react router 5,react-router react-router-dom,react router state,react router prompt,react router route,react-router react-router-dom,react router onenter,react router withrouter,内容如对您有帮助,希望把文章链接给更多的朋友!

React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术

React Router是React的路由库,保持相关页面部件与URL间的同步

下面就来简单介绍其基础使用,更全面的可参考 指南

1. 它看起来像是这样

在页面文件中

在外部脚本文件中

2. 库的引入

React Router库的引入,有两种方式

2.1 浏览器直接引入

可以引用 这里 的浏览器版本,或者下载之后引入

然后就可以直接使用 ReactRouter 这个对象了,我们可能会使用到其中的几个属性

2.2 npm 安装,通过构建工具编译引入

npm install --save react-router

安装好路由库之后,在脚本文件中引入相关属性

因浏览器目前还不能支持import与export命令,且babel工具不会将require命令编译,所以我们还得需要如Webpack等构建工具编译引入

库引入之后,在ReactDOM的render方法中,就可以使用相关的组件了

3. 路由简单使用

最基本的,通过URL判断进入哪个页面(组件部件)

React Router基础使用(react-router react-router-dom)

首先,Router是一个容器,history属性定义了是用何种方式处理页面的URL

有三种:

browserHistory:通过URL的变化改变路由,是推荐的一种方式,但是需要在服务器端需要做一些配置(窝目前还不知怎么配) hashHistory:通过#/ ,其实就像是单页面应用中常见的hashbang方式,example.com/#/path/path.. (使用简单,这里暂且就用这种方式) createMemoryHistory:Memory history 并不会从地址栏中操作或是读取,它能够帮助我们完成服务器端的渲染,我们得手动创建history对象

然后,在容器中使用Route组件定义各个路由,通过path指定路径(可以看到,是不区分大小写的),通过component指定该路径使用的组件

也可以直接在Router容器上直接用routes属性定义各个路由,如

需要注意的是{routes}中只能有一个父级,所以这里加了<div>标签

另外,路由Route也可以嵌套,在上面的例子中,嵌套起来可能更符合实际情况

需要注意的是,这里的App在父级,为了获取子级的First与Second组件,需要在App组件中添加 this.props.children 获取

同样的,可以直接在Router中用routes属性定义路由

4. 路由的其他组件

除了基本的Route之外,IndexRoute、Redirect、IndexRedirect、Link、IndexLink等,顾名思义

IndexRoute: 在主页面会用到,如上个例子中,在路径"/"下我们看到的是空白页面,可以添加默认的页面组件用于导航 Link: 可以认为它是<a>标签在React中的实现,使用to属性定义路径,还可以通过activeClass或activeStyle定义active的样式 IndexLink: 类似Link,推荐用来定义指向主页面的链接,当然也可以随意定义

Redirect: 从from路径重定向到to路径 IndexRedirect: 在主页面,直接重定向到to路径

5. 路由的path规则

path定义的路由的路径,在hashHistory中,它的主页路径是 #/

自定义Route路由通过与父Route的path进行合并,在与主页路径合并,得到最终的路径

path的语法:

:paramName 匹配 URL 的一个部分,直到遇到下一个/、&#;、# () 表示URL的这个部分是可选的 * 匹配任意字符(非贪婪模式),直到模式里面的下一个字符为止 ** 匹配任意字符(贪婪模式),直到下一个/、&#;、#为止

而:name可以通过 this.props.params 中取到

通过React Dev Tool也可以看到组件的相关数据

6. 路由的onEnter、onLeave钩子

在路由的跳转中,我们可能需要在进入页面或离开页面的时候做一些特殊操作,Route 通过 onEnter 与 onLeave 定义了这两个行为

如上,带两个参数,通过 replace 可以更新路径,把注释去掉后,进入"/first"时立马跳转值"/second",这在检测登录时应该比较有用

更多的使用参见 指南

标签: react-router react-router-dom

本文链接地址:https://www.jiuchutong.com/biancheng/376040.html 转载请保留说明!

上一篇:JS 实现计算器详解及实例代码(一)(js实现计算器代码)

下一篇:原生js实现节日时间倒计时功能(原生js实现节日变化)

  • 增值税的专用发票含税吗
  • 出口退税退的税是用进项税抵扣吗
  • 房地产开发企业土地增值税预缴
  • 所得税是什么意思
  • 年报的资产负债率在哪里
  • 开具红字专用发票的条件
  • 筹建期间业务招待费的财税处理规定
  • 未达起征点的增值税怎么账务处理
  • 一般纳税人月底增值税如何结转
  • 多项固定资产能否合并入账
  • 增值税专票劳务费怎么开
  • 药店的成本费用有哪些
  • 当期应税销售收入是含税还是不含税
  • 购货方销售折让的会计处理
  • 商贸企业加工费票计入什么科目
  • 购买固定资产的进口关税
  • 污水处理厂税收风险
  • 开具电费发票说明
  • 税友软件费用
  • 汇算清缴申报后怎样撤销
  • 地毯属于什么类别垃圾分类
  • 未开票收入必须全部转开票收入吗为什么
  • 挑主板要注意什么
  • 委托加工物资的加工费计入什么科目
  • 出库单可以补吗
  • 下载的压缩文件打不开
  • low是什么文件
  • 缅因州达马里斯科塔地区的佩马基德灯塔 (© Tom Whitney/Adobe Stock)
  • mac安装wine教程
  • 鸟瞰视野
  • ChatGPT-Next-Web:Vercel 和 Cloudflare 的快速部署
  • php 登陆
  • vue面试题简书
  • 逾期包装物押金收入计入什么科目
  • 外贸企业出口退税申报流程
  • 留底税额怎么入账
  • 所得税汇算清缴退税会计分录怎么做
  • 小微企业买商品房怎么买
  • 租赁公司开票没有写数量可以开吗?
  • 企业亏损所得税处理
  • 应付职工薪酬和生产成本的区别
  • 法人如何网上申请辞职手续
  • 电子商业汇票背书人记载不得转让
  • 上月未记账,本月同样可以记账
  • 不允许抵扣进项税额的是
  • 加油充值卡能报销吗
  • 职工福利费的扣除标准工资总额包括什么
  • 企业筹建期的开办费后期怎么算
  • 财务费用包括哪几项
  • 电脑开机显示xp后无反应
  • mac显示所有窗口的快捷键
  • centos怎么看硬盘
  • Win8系统筛选器Smartscreen阻止恶意程序运行
  • Ubuntu安装VMware tools
  • win7总是弹出广告怎么办
  • windows8锁屏
  • 查看win8.1版本
  • 安装windows 8.1
  • 防止linux断电系统崩溃
  • Win10控制面板在c盘哪里
  • win7系统玩游戏怎么样
  • win7 win8.1双系统安装教程
  • linux虚拟空间
  • win8更新80072efe
  • win10恢复到win7系统
  • js日期选择框
  • 欢迎使用本公司智能语音电动车
  • jquery分页组件
  • Html5+jQuery+CSS制作相册小记录
  • windows下dos命令
  • firefox background-image垂直平铺问题的解决方法
  • 基于JAVASCRIPT实现的可视化工具是
  • node.js中的http.response.writeHead方法使用说明
  • jquery原理解析
  • python django
  • 小规模企业所得税怎么算
  • 资源税的税目有7个,其中不包括
  • 计算车辆购置税公式
  • 消费发票上的金额含税吗
  • 开票盘是什么意思
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设