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 ...
随机推荐
- LearnOpenGL学习笔记(六)——纹理单元
#version 330 core out vec4 FragColor; in vec3 ourColor; in vec2 TexCoord; uniform sampler2D ourTextu ...
- noip之后的一些感受
你经历过绝望吗,那种希望完全破碎,眼前看不到光亮,不知道下一步怎么走,不知道接下来应该如何生活的那种绝望? 我经历过. 2018.11.12 下午 秦皇岛到石家庄的高铁上 听着同学兴高采烈的讨论,自己 ...
- 动态规划法(四)0-1背包问题(0-1 Knapsack Problem)
继续讲故事~~ 转眼我们的主人公丁丁就要离开自己的家乡,去大城市见世面了.这天晚上,妈妈正在耐心地帮丁丁收拾行李.家里有个最大能承受20kg的袋子,可是妈妈却有很多东西想装袋子里,已知行李的编 ...
- MVC HtmlHelper用法
HtmlHelper用来在视图中呈现 HTML 控件. 以下列表显示了当前可用的一些 HTML 帮助器. 本主题演示所列出的带有星号 (*) 的帮助器. ActionLink - Links to a ...
- Linux中ssh介绍与ssh+key密钥登陆部署
环境内核信息: [root@zabbix- ~]# uname -a Linux zabbix- -.el6.x86_64 # SMP Tue Mar :: UTC x86_64 x86_64 x86 ...
- T-SQL:CTE用法(十)
CTE 也叫公用表表达式和派生表非常类似 先定义一个USACusts的CTE WITH USACusts AS ( SELECT custid, companyname FROM Sales.Cust ...
- Mongodb 集群实战
该实战过程完全跟着官网一步一步实现 ,官网教程:https://docs.mongodb.com/manual/tutorial/atlas-free-tier-setup/ 使用Mongo Shel ...
- jquery 获得下拉框的值《转》
获取Select : 获取select 选中的 text : $("#ddlRegType").find("option:selected").text(); ...
- Nuget快捷实践
Nuget快捷实践 简介 本文主要包含三个部分,即创建nuget包.上传nuget包和删除nuget包.旨在引导快速使用nuget打包和使用,并实现对于nuget的简单管理. 本文使用的nuget服务 ...
- IDEA乱码解决
设置中encoding都指定为utf-8,完全没用. 最终在java编译的地方找到了解决办法