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