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

時間  2019-11-13
標籤 react router dom browserrouter hashrouter link navlink 欄目 React 简体版
原文   原文鏈接

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

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
結果: 可正常訪問node

將HashRouter更改成BrowserRouterreact

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

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

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

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

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

拋出問題:爲何hashRouter能夠直接訪問路徑,而browserRouter會出現找不到路由的狀況？爲何hashRouter在前端跳轉就能成功?服務器

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

browserRouter

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

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

hashRouter

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

可是官方會更推薦使用browserRouter，貌似是由於其構建於H5的History API，比起hashRouter，它多出了更多的方法操控url
詳見: 《react-router-dom》

link與Navlink

如今，咱們應用須要在各個頁面間切換，若是使用錨點元素實現，在每次點擊時，頁面被從新加載，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>

 

 

 

 

轉載自 http://www.javashuo.com/article/p-zwmrmzqk-dn.html

相關文章