路由:

哈希路由(在url地址后加   #name) 

  1.  // 实现页面监听
  2.  window.onhashchange = function(){
  3.   console.log(‘hash:’,window.location.hash)
  4.  }

H5路由(history.pushState(‘起的名字’, ‘title字段’, ‘跳转的地址’))
H5路由高级的地方就是可以跳转一个hash值,也可以跳转一个路径,且跳转路径时页面不会刷新

  1.  // 实现页面监听
  2.  window.onpopstate = function (e) {
  3.   console.log(‘H5:’, window.location.pathname)
  4.  }

还有一个特殊的 history.replaceState,它和 history.pushState 调用方式一样。唯一的区别是pushState是在历史记录栈推送一条记录,而replaceState是替换当前的历史记录栈,不会更改其他的历史记录。

React和路由相关的元素:

  1. // 哈希路由
  2. <HashRouter>
  3.  
  4. // H5路由  
  5. <BrowserRouter>
  6.  
  7. // 路由规则
  8. <Route>
  9.  
  10. // 路由选项
  11. <Switch>
  12.  
  13. // 跳转导航
  14. <Link> || <NavLink>
  15.  
  16. // 自动跳转
  17. <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. MyBatis源码解析【7】接口式编程

    前言 这个分类比较连续,如果这里看不懂,或者第一次看,请回顾之前的博客 http://www.cnblogs.com/linkstar/category/1027239.html 修改例子 在我们实际 ...

  2. Visual Studio 2012 智能提示功能消失解决办法

    安装为Visual Studio 2012且更新到了Update3,但是发现智能提示功能用不了,查了一下,网上各种资料,重装VS,连重装系统的都有.不过有很多朋友都是使用命令行重置VS的方法解决了这个 ...

  3. asp.net mvc5轻松实现插件式开发

    在研究Nopcommece项目代码的时候,发现Nop.Admin是作为独立项目开发的,但是部署的时候却是合在一起的,感觉挺好 这里把他这个部分单独抽离出来, 主要关键点: 确保你的项目是MVC5 而不 ...

  4. c# 对象集合转Json

    /// <summary> /// 普通集合转换Json /// </summary> /// <param name="array">集合对象 ...

  5. IIS服务器SSL证书安装

    在证书控制台下载IIS版本证书,下载到本地的是一个压缩文件,解压后里面包含.pfx文件是证书文件,pfx_password.txt是证书文件的密码. 友情提示: 每次下载都会产生新密码,该密码仅匹配本 ...

  6. 【协议】2、TCP/IP协议三次握手与四次握手流程解析

    一.TCP报文格式  TCP/IP协议的详细信息参看<TCP/IP协议详解>三卷本.下面是TCP报文格式图:图1 TCP报文格式  上图中有几个字段需要重点介绍下:  (1)序号:Seq序 ...

  7. The Most Simple Introduction to Hypothesis Testing

    https://www.youtube.com/watch?v=UApFKiK4Hi8

  8. ConcurrentHashMap底层实现原理(JDK1.8)源码分析

    ref:https://blog.csdn.net/xu768840497/article/details/79194701 http://www.cnblogs.com/leesf456/p/545 ...

  9. 使用普通用户执行 docker

    CentOS 版本 7.4,Docker 版本 docker-1.13 及以下 ll /var/run/docker.sock srw-rw----. 1 root root 0 May 25 14: ...

  10. TortoiseSVN 1.9.5安装 与 Eclipse4.4.2及以上版本中安装SVN插件

    引自: http://blog.csdn.net/chenchunlin526/article/details/54631458 TortoiseSVN 1.9.5安装 与 Eclipse4.4.2及 ...