ReactRouter简介
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 静态路由配置的⼩助⼿
⼀、安装（不需要安装 react-router，直接安装 react-router-dom 就可以了）
1、npm install --save react-router-dom
2、⾸先引⼊对应的模块
import {
HashRouter as Router,
Route,
Link
} from 'react-router-dom'
3、这三个都是标签名。
（1）Router 表⽰路由包裹标签，另外2个应该放在这个标签⾥---标签内，只能放⼀个元素，⼀般是放⼀个 div 标签，然后其他标签放这个div 标签⾥；
（2）Link 表⽰导航标签，就是说点击这个后，会将 url 进⾏切换---标签是导航标签，类似<a></a>标签，点击后会跳转 url；
（3）Route 表⽰模块标签，当当前的 url 符合 Route 标签的设置时，会将该标签显⽰出来---标签是路由组件标签，当 path 属性和当前 url 相同时，会⾃动显⽰ component 属性中匹配的标签（所有匹配成功的都会显⽰）；
⼆、主要组件
1、路由器部分
BrowserRouter：使⽤H5的历史记录API，保持ul和url同步，需要服务器配置才可使⽤
HashRouter：使⽤url的hash部分，保持ul和url同步，适⽤于旧版浏览器，推荐使⽤BrowserRouter
区别：hash 地址就是指 # 号后⾯的 url。
假如有⼀个 Link 标签，点击后跳转到 /abc/def。
如果有服务器端的动态⽀持，建议使⽤ BrowserRouter，否则建议使⽤ HashRouter。
原因在于，如果是单纯的静态⽂件，假如路径从 / 切换到 /a 后，此时刷新页⾯，页⾯将⽆法正常访问。
⼆者的替换⽅法很简单，我们在引⼊ react-router-dom 时，如以下：
import {
react router 方法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）
三、主要属性
history：历史相关信息
location：位置信息，确定来去
match：如何匹配url，⽀持参数传递
四、资料
react-router官⽅
react-router4相关教程
BrowserRoute服务器配置

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。