react-router-dom中的BrowserRouter和HashRouter和link與Navlink

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與Navlink

Link

現在，我們應用需要在各個頁面間切換，如果使用錨點元素實作，在每次點選時，頁面被重新加載，React Router提供了<Link>元件用來避免這種狀況發生。當你點選<Link>時，url會更新，元件會被重新渲染，但是頁面不會重新加載

由于

Link

屬于前端内部跳轉,在跳轉時也不會向伺服器發送請求.

例子

<Link to="/about">關于</Link>
 
// to為obj
<Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  state: { fromDashboard: true }
}}/>
 
// replace 

<Link to="/courses" replace />

<Link>使用to參數來描述需要定位的頁面。它的值既可是字元串，也可以是location對象（包含pathname、search、hash、與state屬性）如果其值為字元串，将會被轉換為location對象

replace(bool)：為 true 時，點選連結後将使用新位址替換掉通路曆史記錄裡面的原位址；為 false 時，點選連結後将在原有通路曆史記錄的基礎上添加一個新的紀錄。預設為 false；

點選Link後，路由系統發生了什麼？

Link 元件最終會渲染為 HTML 标簽 <a>，它的 to、query、hash 屬性會被組合在一起并渲染為 href 屬性。雖然 Link 被渲染為超連結，但在内部實作上使用腳本攔截了浏覽器的預設行為，然後調用了history.pushState 方法（注意，文中出現的 history 指的是通過 history 包裡面的 create*History 方法建立的對象，window.history 則指定浏覽器原生的 history 對象，由于有些 API 相同，不要弄混）。history 包中底層的 pushState 方法支援傳入兩個參數 state 和 path，在函數體内有将這兩個參數傳輸到 createLocation 方法中，傳回 location 的結構如下：

location = {
  pathname, // 目前路徑，即 Link 中的 to 屬性
  search, // search
  hash, // hash
  state, // state 對象
  action, // location 類型，在點選 Link 時為 PUSH，浏覽器前進後退時為 POP，調用 replaceState 方法時為 REPLACE
  key, // 用于操作 sessionStorage 存取 state 對象
};

系統會将上述 location 對象作為參數傳入到 TransitionTo 方法中，然後調用 window.location.hash 或者window.history.pushState() 修改了應用的 URL，這取決于你建立 history 對象的方式。同時會觸發history.listen 中注冊的事件監聽器。

NavLink

<NavLink>是<Link>的一個特定版本，會在比對上目前的url的時候給已經渲染的元素添加參數，元件的屬性有

activeClassName(string)：設定選中樣式，預設值為active

activeStyle(object)：當元素被選中時，為此元素添加樣式

exact(bool)：為true時，隻有當導緻和完全比對class和style才會應用

strict(bool)：為true時，在确定為位置是否與目前URL比對時，将考慮位置pathname後的斜線

isActive(func)判斷連結是否激活的額外邏輯的功能

嗯、看例子就懂了

// activeClassName選中時樣式為selected
<NavLink
  to="/faq"
  activeClassName="selected"
>FAQs</NavLink>
 
// 選中時樣式為activeStyle的樣式設定
<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: 'bold',
    color: 'red'
   }}
>FAQs</NavLink>
 
// 當event id為奇數的時候，激活連結
const oddEvent = (match, location) => {
  if (!match) {
    return false
  }
  const eventID = parseInt(match.params.eventID)
  return !isNaN(eventID) && eventID % 2 === 1
}
 
<NavLink
  to="/events/123"
  isActive={oddEvent}
>Event 123</NavLink>

轉載自 https://blog.csdn.net/lhjuejiang/article/details/80366839