路由:

哈希路由(在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路由 + 绝对路径引用的更多相关文章

  1. 七天接手react项目 系列 —— react 路由

    其他章节请看: 七天接手react项目 系列 react 路由 本篇首先讲解路由原理,接着以一个基础路由示例为起点讲述路由最基础的知识,然后讲解嵌套路由.路由传参,最后讲解路由组件和一般组件的区别,以 ...

  2. react路由的安装及格式和使用方法

    react路由的安装: 在要创建项目的目录命令窗里输入: cnpm install -g create-react-app create-react-app  项目名 在创建好的项目目录命令窗里输入: ...

  3. react路由嵌套

    所谓的嵌套路由就是在某些以及路由下面存在二级路由,这些二级路由除了公用一级路由导航模块外,还公用当前的二级路由的导航模块,也就是部分进行了切换,要实现嵌套路由,首先回顾之前的内容,实现基本的react ...

  4. react 路由 react-router@3.2.1

    react路由,4.x的差异还是比较大,暂时还是3.x的版本 安装: npm install -S react-router@3.x 配置: import { Router, Route, hashH ...

  5. React路由配置

    React路由简单配置 //入口文件index.js import React from 'react'; import ReactDom from 'react-dom'; import { Rou ...

  6. React 路由&脚手架

    1.创建react项目 npm install -g create-react-app 全局环境 create-react-app my-app 创建项目 cd my-app 进入项目 npm sta ...

  7. 【React 8/100】 React路由

    React路由 React路由介绍 现代的前端应用大多数是SPA(单页应用程序),也就是只有一个HTML页面的应用程序.因为它的用户体验更好.对服务器压力更小,所以更受欢迎.为了有效的使用单个页面来管 ...

  8. 我的一个react路由之旅(步骤及详图)

    今天开始react一个重要部分的xiao~习,路由~(过程截图,最后附代码) 以下代码只能骗糊涂蛋子,没错,就是我自己,不要打算让我敲出多高级的东西~ 理论性知识几乎没有,请不要打算让我给你说原理啥的 ...

  9. 我的一个React路由嵌套(多级路由),路由传参之旅

    在上一篇react路由之旅中,我们简单地配置了react,进行了react路由及相关知识的学习,引入以及实现一个局部跳转的功能,接下来就是深入学习路由的嵌套以及传参,这是工作中主要用要的. 我的rea ...

随机推荐

  1. PHP-CPP开发扩展(一)

    PHP-CPP是一个用于开发PHP扩展的C++库.PHP-CPP提供了一系列完善的文档.易于使用和扩展的类,让你可以相对快速的创建PHP的原生扩展. 为什么使用PHP-CPP 很快 用C++编写的代码 ...

  2. Spring Boot + Spring Cloud 实现权限管理系统 后端篇(十四):项目打包部署

    项目打包部署 安装MySQL镜像 注意:如果使用docker镜像安装MySQL,也需要在前端部署主机安装MySQL,因为备份还原功能是使用MySQL的本地命令进行操作的. 下载镜像 执行以下命令,拉取 ...

  3. Hystrix参数配置

    1.Hystrix参数配置文档  2.Hystrix参数配置示例 import org.springframework.beans.factory.annotation.Autowired; impo ...

  4. Python程序每日一练习

    问题一:做为Apple Store App独立开发者,你要搞限时促销,为你的应用生成激活码(或者优惠券),使用Python如何生成200个激活码(或者优惠券)? 简介:通用唯一识别码(英语:Unive ...

  5. Hibernate学习(二)———— 一级缓存和三种状态解析

    一.一级缓存和快照 什么是一级缓存呢? 很简单,每次hibernate跟数据库打交道时,都是通过session来对要操作的对象取得关联,然后在进行操作,那么具体的过程是什么样的呢? 1.首先sessi ...

  6. openssl genrsa

    openssl系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html genrsa用于生成RSA私钥,不会生成公钥,因为公钥提取自私钥,如果需要查 ...

  7. SQL 行列转换数据转换为字符串

    行列转换,将列数据转换为字符串输出 ) SET @center_JZHW = ( SELECT DISTINCT STUFF( ( SELECT ',' + ce_code FROM ap_cente ...

  8. 微信公众号开发--.Net Core实现微信消息加解密

    1:准备工作 进入微信公众号后台设置微信服务器配置参数(注意:Token和EncodingAESKey必须和微信服务器验证参数保持一致,不然验证不会通过). 2:基本配置 设置为安全模式 3.代码实现 ...

  9. Java基础——Oracle(七)

    一.概述 pl/sql (procedural lanaguage/sql)是 oracle 在标准 sql 上的扩展 .不仅允许嵌入sql 语言,还可以定义变量和常量,允许使用条件语句和循环语句,允 ...

  10. 站在DevOps肩膀上的TestOps(一)

    一十一 发表于 2018-03-14 15:50:03 TestOps   摘要: DevOps团队的职责是“无摩擦发展”. 这是对“速度需求”驱动的发展理念的一种渴望,以及有意识地去除从概念到客户的 ...