React Router简介

React Router简介

　　React Router 是完整的 React 路由解决方案，它保持 UI 与 URL 同步，拥有简单的 API 与强大的功能例如代码缓冲加载、动态路由匹配、以及创建正确的位置过渡处理。

react-router React Router 核心
react-router-dom 用于 DOM 绑定的 React Router
react-router-native 用于 React Native 的 React Router
react-router-redux React Router 和 Redux 的集成
react-router-config 静态路由配置的小助手

 

1、安装（不须要安装 react-router，直接安装 react-router-dom 就能够了）

一、npm install --save react-router-dom

二、首先引入对应的模块

import {
    HashRouter as Router,
    Route,
    Link
} from 'react-router-dom'

三、这三个都是标签名。

（1）Router 表示路由包裹标签，另外2个应该放在这个标签里---标签内，只能放一个元素，通常是放一个 div 标签，而后其余标签放这个 div 标签里；

（2）Link 表示导航标签，就是说点击这个后，会将 url 进行切换---标签是导航标签，相似 <a></a> 标签，点击后会跳转 url；

（3）Route 表示模块标签，当当前的 url 符合 Route 标签的设置时，会将该标签显示出来---标签是路由组件标签，当 path 属性和当前 url 相同时，会自动显示 component 属性中匹配的标签（全部匹配成功的都会显示）；

 

2、主要组件

1、路由器部分

BrowserRouter：使用H5的历史记录API，保持ul和url同步，须要服务器配置才可以使用

HashRouter：使用url的hash部分，保持ul和url同步，适用于旧版浏览器，推荐使用BrowserRouter

 

区别：hash 地址就是指 # 号后面的 url。

假若有一个 Link 标签，点击后跳转到 /abc/def。

BrowserRouter： http://localhost:8080/abc/def
HashRouter： http://localhost:8080/#/abc/def

若是有服务器端的动态支持，建议使用 BrowserRouter，不然建议使用 HashRouter。

缘由在于，若是是单纯的静态文件，假如路径从 / 切换到 /a 后，此时刷新页面，页面将没法正常访问。

两者的替换方法很简单，咱们在引入 react-router-dom 时，如如下：

import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom'

将 BrowserRouter 修改成 HashRouter 就能够了，基本不须要修改其余东西。

2、导航部分，路由跳转标签

Link：路由跳转组件，其实就是a标签（to，replace）

NavLink：对比Link有更多API，更方便，好比可设置路径匹配时标签的类名和样式（属性activeClassName、activeStyle、isActive、exact、restrict、to）

 

3、模块部分，路由跳转对象

Route：由Link路由跳转到的部分（path、compoent、exact、strict）

 

4、其余

Redirect：适用于重定向到其余地址（to）

Switch：只匹配第一个与路径匹配的Route或Redirect

Prompt：切换路径时给出提示（message，when）

 

3、主要属性

history：历史相关信息

location：位置信息，肯定来去

match：如何匹配url，支持参数传递

 

4、资料

react-router官方

https://reacttraining.com/react-router/web/api/BrowserRouter

react-router4相关教程

http://www.javashuo.com/article/p-mvrwuijs-bk.html

http://www.javashuo.com/article/p-peiotxnz-bd.html

BrowserRoute服务器配置

https://www.cnblogs.com/Michelle20180227/p/10129687.html