React路由 + 绝对路径引用
路由:
哈希路由(在url地址后加 #name)
// 实现页面监听
window.onhashchange = function(){
console.log(‘hash:’,window.location.hash)
}
H5路由(history.pushState(‘起的名字’, ‘title字段’, ‘跳转的地址’))
H5路由高级的地方就是可以跳转一个hash值,也可以跳转一个路径,且跳转路径时页面不会刷新
// 实现页面监听
window.onpopstate = function (e) {
console.log(‘H5:’, window.location.pathname)
}
还有一个特殊的 history.replaceState,它和 history.pushState 调用方式一样。唯一的区别是pushState是在历史记录栈推送一条记录,而replaceState是替换当前的历史记录栈,不会更改其他的历史记录。
React和路由相关的元素:
// 哈希路由
<HashRouter> // H5路由
<BrowserRouter> // 路由规则
<Route> // 路由选项
<Switch> // 跳转导航
<Link> || <NavLink> // 自动跳转
<Redirect>
绝对路径的引用
相信很多童鞋在React中出现过引用过长的问题
举个
React路由 + 绝对路径引用的更多相关文章
- 七天接手react项目 系列 —— react 路由
其他章节请看: 七天接手react项目 系列 react 路由 本篇首先讲解路由原理,接着以一个基础路由示例为起点讲述路由最基础的知识,然后讲解嵌套路由.路由传参,最后讲解路由组件和一般组件的区别,以 ...
- react路由的安装及格式和使用方法
react路由的安装: 在要创建项目的目录命令窗里输入: cnpm install -g create-react-app create-react-app 项目名 在创建好的项目目录命令窗里输入: ...
- react路由嵌套
所谓的嵌套路由就是在某些以及路由下面存在二级路由,这些二级路由除了公用一级路由导航模块外,还公用当前的二级路由的导航模块,也就是部分进行了切换,要实现嵌套路由,首先回顾之前的内容,实现基本的react ...
- react 路由 react-router@3.2.1
react路由,4.x的差异还是比较大,暂时还是3.x的版本 安装: npm install -S react-router@3.x 配置: import { Router, Route, hashH ...
- React路由配置
React路由简单配置 //入口文件index.js import React from 'react'; import ReactDom from 'react-dom'; import { Rou ...
- React 路由&脚手架
1.创建react项目 npm install -g create-react-app 全局环境 create-react-app my-app 创建项目 cd my-app 进入项目 npm sta ...
- 【React 8/100】 React路由
React路由 React路由介绍 现代的前端应用大多数是SPA(单页应用程序),也就是只有一个HTML页面的应用程序.因为它的用户体验更好.对服务器压力更小,所以更受欢迎.为了有效的使用单个页面来管 ...
- 我的一个react路由之旅(步骤及详图)
今天开始react一个重要部分的xiao~习,路由~(过程截图,最后附代码) 以下代码只能骗糊涂蛋子,没错,就是我自己,不要打算让我敲出多高级的东西~ 理论性知识几乎没有,请不要打算让我给你说原理啥的 ...
- 我的一个React路由嵌套(多级路由),路由传参之旅
在上一篇react路由之旅中,我们简单地配置了react,进行了react路由及相关知识的学习,引入以及实现一个局部跳转的功能,接下来就是深入学习路由的嵌套以及传参,这是工作中主要用要的. 我的rea ...
随机推荐
- quartz配置参数org.quartz.jobStore.misfireThreshold含义解释
配置定时任务参数 quartz.properties文件时 需要配置jobStore的超过时间数 默认为60秒(这里单位为毫秒) org.quartz.jobStore.misfireThreshol ...
- Apache Kafka: 优化部署的10个最佳实践
原文作者:Ben Bromhead 译者:江玮 原文地址:https://www.infoq.com/articles/apache-kafka-best-practices-to-opti ...
- Hibernate学习(一)———— 第一个hibernate工程
一.什么是Hibernate? 轻量级JavaEE应用的持久层框架,是一个完全的ORM框架.(说完这句话,肯定有很多人懵圈了,下面我来一个个解释) 持久化:将我们想要保存的数据保存到硬盘上,也就是我们 ...
- Python和Java编程题(二)
题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? 兔子的规律为数列1,1,2,3,5,8,13,21 ...
- Ocelot中文文档-Route
路由(Routing) Ocelot主要功能是接收即将发来的请求并转发它们至下游服务.与此同时,以另一个http请求的形式(在将来这可能是任何传输的机制) Ocelot将一个请求的路由描述为另一个路由 ...
- HotSpot 虚拟机对象揭秘【转载】
对象的创建 Java 对象的创建过程, ①类加载检查: 虚拟机遇到一条 new 指令时,首先将去检查这个指令的参数是否能在常量池中定位到这个类的符号引用,并且检查这个符号引用代表的类是否已被加载过.解 ...
- 关于Ajax的get与post浅分析,同步请求与异步请求,跨域请求;
Ajax局部异步刷新全称ASynchronous JavaScript And XML.使用Javascript代码获取服务器的数据,Ajax当中有两个请求方法,一个是get方法,一个是post请求方 ...
- Schwartz–Zippel lemma
鬼知道老师从哪儿扒的这东西啊,.... 百度了一下毛都没有啊,维基百科看不懂啊.. 定理 一个$m$元$n$次多项式,在域$F$内随机给每个变量赋值 等于零的概率小于$\dfrac{n}{|F|}$ ...
- Linux 操作系统下的环境变量设置
Linux下的环境变量设置 by:授客 QQ:1033553122 1. 问题描述 linux输入命令时经常会出现提示:xxx:Command not found 2. 原因分析 Command ...
- Android Java语法学习
Activity中有一个名称叫onCreate的方法.该方法是在Activity创建时被系统调用,是一个Activity生命周期的开始. onCreate方法的参数savedInstanceState ...