React页面路由

目录

一、页面路由

1、页面路由的方式

二、React的页面路由模块

1、安装：npm install react-router-dom

2、实现路由模式的组件(最外层)：决定路由模式

3、Route组件：实现路径和显示组件之间的映射

4、Router组件

5、Link和NavLink组件：类似于标签

6、Redirect组件：页面重定向。属性和Link相同

7、Switch组件：进行路由切换。类似Tab标签

8、withRouter组件

9、404视图

---

一、页面路由

1、页面路由的方式

（1）hash模式：在url后面带#

这里的 hash 就是指 url 尾巴后的 # 号以及后面的字符。这里的 # 和 css 里的 # 是一个意思。hash也称作锚点，本身是用来做页面定位的，她可以使对应 id 的元素显示在可视区域内。

hash 本来是拿来做页面定位的，如果拿来做路由的话，原来的锚点功能就不能用了。

 缺点：传递参数的方式是在url后拼接,会有体积的限制

使用到的api：

• window.location.hash = 'qq' // 设置 url 的 hash，会在当前url后加上 '#qq'

• var hash = window.location.hash // '#qq'

• window.addEventListener('hashchange', function(){

      // 监听hash变化，点击浏览器的前进后退会触发

  })

（2）history模式

• 可以传递复杂的参数
• 可以监听浏览器的前进、后退事件(back、forward、go)

hash 的传参是基于 url的，如果要传递复杂的数据，会有体积的限制，而history 模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中

 使用到的api

• window.history.pushState(state, title, url)
• state：需要保存的数据，这个数据在触发popstate事件时，可以在event.state里获取
• title：标题，基本没用，一般传 null
• url：设定新的历史记录的 url。新的 url 与当前 url 的 origin 必须是一樣的，否则会抛出错误。url可以是绝对路径，也可以是相对路径

 举例：

• 当前url是 https://www.baidu.com/a/,执行history.pushState(null, null, './qq/')，则变成 https://www.baidu.com/a/qq/，执行history.pushState(null, null, '/qq/')，则变成 https://www.baidu.com/qq/