react-router-dom下的BrowserRouter和HashRouter

奇思妙想的🌰

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

import { HashRouter as Router, Route, Redirect } from 'react-router-dom';  
// as的作用為將HashRouter重命名為Router,這樣的好處是在反復測試HashRouter和BrowserRouter時,可以免去組件修改

import Home from './pages/Home/index';
import Hooks from './pages/Hooks/index';

export default function App() {
  return (
    <Router>
      <Route path="/">
        <Redirect to="/home" />
      </Route>
      <Route path="/home" component={Home} />
      <Route path="/hooks" component={Hooks} />
    </Router>
  )
}

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

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

將HashRouter更改為BrowserRouter

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
詳見: 《react-router-dom》

Link

由於Link屬於前端內部跳轉,在跳轉時也不會向服務器發送請求.