什麼是路由
路由維護了 URL 位址群組件的映射關系, 通過這個映射關系, 我們就可以根據不同的 URL 位址，去渲染不同的元件。
React 中使用路由
- 安裝 react-router
npm install react-router-dom 通過指定監聽模式:
- BrowserRouter history模式：http://www.it6666.top/home
- HashRouter hash模式：http://www.it6666.top/#/home
- 通過
Link
- 通過
Route
BrowserRouter 和 HashRouter 的作用：
- 指定路由的監聽模式 history模式 / hash模式
- history 模式：http://www.it6666.top/home
- hash：模式：http://www.it6666.top/#/home
Link 的作用：
- 用于修改 URL 的資源位址
Route 的作用：
- 用于維護 URL 群組件之間的關系
- Route 是一個占用元件, 将來它會根據比對到的資源位址渲染對應的元件
案例
需求，界面上有兩個按鈕, 點選不同按鈕顯示不同元件：
在看如上的這個特性之前首先降低一下 React 的版本，這裡部落客介紹的不是 React 最新版本的文法，關于 React 後面更新的版本後面在更新，運作如下執行：
npm install --save [email protected] [email protected] 更改 index.js:
import ReactDOM from 'react-dom';
import React from 'react';
import App from './App';
ReactDOM.render(<App/>, document.getElementById('root')); App.js:
import React from 'react';
import Home from './components/Home'
import About from './components/About'
import {BrowserRouter, HashRouter, Link, Route, Routes} from 'react-router-dom';
class App extends React.PureComponent {
render() {
return (
<div>
<HashRouter>
<Link to={'/home'}>Home</Link>
<Link to={'/about'}>About</Link>
<Routes>
<Route path="/" element={<Home/>}/>
<Route path="home" element={<Home/>}/>
<Route path="about" element={<About/>}/>
</Routes>
</HashRouter>
</div>
)
}
}
export default App; About.js:
import React from 'react';
class About extends React.PureComponent {
render() {
return (
<div>About</div>
)
}
}
export default About; Home.js:
import React from 'react';
class Home extends React.PureComponent {
render() {
return (
<div>Home</div>
)
}
}
export default Home; 在 V5 與 V6 它們之間的寫法還是有更改的，具體的更改内容參考：https://www.querythreads.com/error-error-a-route-is-only-ever-to-be-used-as-the-child-of-routes-element/
官網文檔位址: https://reactrouter.com/web/guides/quick-start
React 路由注意點
- react-router4 之前, 所有路由代碼都是統一放到 react-router 中管理的
- react-router4 開始, 拆分為了兩個包 react-router-dom 和 react-router-native
- react-router-dom 是在浏覽器中使用路由
- react-router-native 是在原生應用中使用的路由(IOS, 安卓)
- BrowserRouter history 模式使用的是 H5 的特性, 是以相容性會比 HashRouter hash 模式差一些
- 在企業開發中如果不需要相容低級版本浏覽器, 建議使用
BrowserRouter
- 如果需要相容低級版本浏覽器, 那麼隻能使用
HashRouter
- 無論是 Link 還是 Route 都隻能放到 BrowserRouter 和 HashRouter 中才有效(放在之外就會無效)
Route 注意點[1]
- 預設情況下 Route 在比對資源位址時, 是
模糊
- 如果必須和資源位址一模一樣才比對, 那麼需要添加
exact
精準
- Route 在比對路由的時候, 是利用目前資源位址從左至右的和 path 中的位址進行比對的
- 隻要目前資源位址從左至右完整的包含了 path 中的位址那麼就認為比對成功了
目前資源位址：/home/about
- path 中的位址: /home
- path 中的位址: /home/about
模糊比對：
App.js:
import React from 'react';
import Home from './components/Home'
import About from './components/About'
import {BrowserRouter, Link, Route} from 'react-router-dom';
class App extends React.PureComponent {
render() {
return (
<div>
<BrowserRouter>
<Link to={'/home'}>Home</Link>
<Link to={'/home/about'}>About</Link>
<Route path="/home" component={Home}/>
<Route path="/home/about" component={About}/>
</BrowserRouter>
</div>
)
}
}
export default App; 
精準比對：
App.js:
import React from 'react';
import Home from './components/Home'
import About from './components/About'
import {BrowserRouter, Link, Route} from 'react-router-dom';
class App extends React.PureComponent {
render() {
return (
<div>
<BrowserRouter>
<Link to={'/home'}>Home</Link>
<Link to={'/home/about'}>About</Link>
<Route exact path="/home" component={Home}/>
<Route exact path="/home/about" component={About}/>
</BrowserRouter>
</div>
)
}
}
export default App; 
Link 注意點
- 預設情況下 Link 會渲染成一個 a 标簽
- 如果想渲染成其他的元素, 可以通過手動路由跳轉來實作(後續文章嵌套路由在介紹)
NavLink
除了 Link 可以修改資源位址外，還可以通過 NavLink 修改，也是可以的。
NavLink 注意點：
- NavLink 在比對路由的時候, 是利用目前資源位址從左至右的和 path 中的位址進行比對的
- 隻要目前資源位址從左至右完整的包含了 path 中的位址那麼就認為比對
- 預設情況下 NavLink 在比對資源位址時, 是模糊比對
- 如果必須和資源位址一模一樣才比對, 那麼需要添加
exact
目前資源位址: /home/about
- to 中的位址: /home
- to 中的位址: /home/about
關于 NavLink 更多的 Api 可去官方文檔進行檢視：
如上圖中的我所标記出來的一個屬性是設定選中激活狀态下的樣式，如果是模糊比對出現的效果就是其它的 Link 狀态連結的樣式也會進行更改，需要設定為精确比對才可以達到點選那個就是那個連結的樣式改變的效果。
也就是說，在浏覽器的路徑當中如果是 home/about 下方頁面，會渲染出兩個元件分别是 home 與 about 元件。但是在 v5 與 v6 好像 React 已經做出了改動特性與文法會有所不同，本篇文章到此為止就差不多就如上這些内容了，其它的内容我會再起一篇文章繼續介紹。
- NavLink 注意點與 Route 同理 ↩︎