react-router-dom中的BrowserRouter和HashRouter

 

HashRouter包裹下訪問根服務：假設爲 localhost:3000/

 1 import { HashRouter as Router, Route, Redirect } from 'react-router-dom';  2 // as的做用爲將HashRouter重命名爲Router,這樣的好處是在反覆測試HashRouter和BrowserRouter時,能夠免去組件修改
 3 
 4 import Home from './pages/Home/index';  5 import Hooks from './pages/Hooks/index';  6 
 7 export default function App() {  8   return (  9     <Router>
10       <Route path="/">
11         <Redirect to="/home" />
12       </Route>
13       <Route path="/home" component={Home} />
14       <Route path="/hooks" component={Hooks} />
15     </Router>
16  ) 17 }

操做一: 瀏覽器直接輸入localhost:3000/
結果: 路由自動變爲localhost:3000/#/home,可正常訪問.

操做二: 瀏覽器直接輸入localhost:3000/#/hooks
結果: 可正常訪問

將HashRouter更改成BrowserRouter

1 import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';  // 使用BrowserRouter

操做一: 瀏覽器直接輸入localhost:3000/
結果: 路由自動變爲localhost:3000/home,可正常訪問

操做二: 瀏覽器直接輸入localhost:3000/hooks
結果: 瀏覽器沒法得到正確的結果,Cannot GET /hooks

操做二: 瀏覽器直接輸入localhost:3000/home
結果: 瀏覽器沒法得到正確的結果,Cannot GET /home

操做三: 瀏覽器直接輸入localhost:3000/成功後,點擊內容<Link to="home">Home</Link>
結果: 可成功跳轉

那麼問題來了：爲何HashRouter能夠直接訪問路徑,而BrowserRouter會出現找不到路由的狀況？爲何HashRouter在前端跳轉就能成功?

服務器路由: browserRouter, 前端路由: hashRouter

browserRouter

若是前端使用了browserRouter,每次改變路由時，會向服務器發送請求，由於服務器未配置對應的路徑指向對應的文件，天然致使出現404的狀況.(對於初始化頁面,即路由爲/時,不會發送請求)

所以在使用browserHistory須要再加一層服務器配置(node/nginx),讓前端發送的請求映射到對應的html文件上.

hashRouter

因爲hashRouter會在路徑上添加/#/，而/#/後面的全部都不會發送到服務器端，即對於服務器而言，路徑依舊是localhost:3000，路由切換在前端完成。

可是官方會更推薦使用browserRouter，貌似是由於其構建於H5的History API，比起hashRouter，它多出了更多的方法操控url

 

 

轉載自：https://www.cnblogs.com/soyxiaobi/p/11096940.html