react-router-dom v4

多層路由嵌套示例：

https://github.com/DudeYouth/react-route-dom-test.git

一、BrowserRouter

　　說明：使用HTML5歷史記錄API（pushState，replaceState和popstate事件）的<Router>來保持UI與URL的同步

 

import { BrowserRouter } from 'react-router-dom'

<BrowserRouter
  basename={optionalString}
  forceRefresh={optionalBool}
  getUserConfirmation={optionalFunc}
  keyLength={optionalNumber}
>
  <App/>
</BrowserRouter>

 

 

 

　　1. basename:string

　　　　所有位置的基本URL。 如果您的應用程序是從服務器上的子目錄提供的，則需要將其設置為子目錄。

　　2. getUserConfirmation：function

　　　　一個用來確認導航功能。默認使用window.confirm。

　　3. forceRefresh:bool

　　　　如果為true，則路由器將在頁面導航中使用全頁刷新。 您可能只希望在不支持HTML5歷史記錄API的瀏覽器中使用此功能。

　　4. keyLength:number

　　　　location.key的長度。 默認為6

　　5. children:node

　　　　要呈現的單個子元素。

二、 HashRouter

　　說明：使用URL的哈希部分（即window.location.hash）的<路由器>可以保持您的UI與URL同步。注意：哈希歷史記錄不支持location.key或location.state。 在以前的版本中，我們試圖緩和行為，但是有一些邊緣案例我們無法解決。 任何需要此行為的代碼或插件將無法正常工作。 由於此技術僅用於支持舊版瀏覽器，因此我們建議您將服務器配置為使用<BrowserHistory>

 

import { HashRouter } from 'react-router-dom'

<HashRouter>
  <App/>
</HashRouter>

 

　　1. basename:string(與BrowserRouter相同)

<HashRouter basename="/calendar"/>
<Link to="/today"/> // renders <a href="#/calendar/today">

 

　　2. getUserConfirmation：function(與BrowserRouter相同)

// this is the default behavior
const getConfirmation = (message, callback) => {
  const allowTransition = window.confirm(message)
  callback(allowTransition)
}

<HashRouter getUserConfirmation={getConfirmation}/>

　　3. hashType:string

　　　　用於window.location.hash的編碼類型。 可用值為：

　　　　“slash” - 創建哈希如＃/和＃/陽光/棒棒糖
　　　　“noslash” - 創建哈希如＃和＃陽光/棒棒糖
　　　　“hashbang” - 創建“ajax可抓取”（Google不推薦使用）哈希像＃！/和＃！/ sunshine /棒棒糖
　　　　默認為“slash”。

　　4. children:node(與BrowserRouter相同)

三、Link

import { Link } from 'react-router-dom'

<Link to="/about">About</Link>

 

　　1. to:string

　　　　鏈接到的路徑名或位置。

　　2. to:object

　　　　要鏈接的位置。

　　3. repalce:bool

　　　　如果為真，單擊鏈接將替換歷史堆棧中的當前條目，而不是添加新條目。

四、 NavLink

　　

import { NavLink } from 'react-router-dom'

<NavLink to="/about">About</NavLink>

 

　　1. activeClassName: string

　　　　當活動時給出元素的類。 默認給定類是活動的。 這將與className支持相結合。

<NavLink
  to="/faq"
  activeClassName="selected"
>FAQs</NavLink>

 

　　2. activeStyle:object

　　　　當元素處於活動狀態時應用於元素的樣式

　　3.  exact: bool

　　　　當為真時，僅當位置匹配完全時才會應用活動類/樣式。

　　4.  strict: bool

　　　　當為真時，在確定位置是否與當前網址匹配時，將考慮位置路徑名上的尾部斜線。 有關詳細信息，請參閱<Route strict>文檔。

　　5.  isActive: func

　　　　添加用於確定鏈接是否活動的額外邏輯的功能。 如果您想要更多地驗證鏈接的路徑名與當前URL的路徑名匹配，則應該使用這一點。

五、Redirect

　　

import { Route, Redirect } from 'react-router'

<Route exact path="/" render={() => (
  loggedIn ? (
    <Redirect to="/dashboard"/>
  ) : (
    <PublicHomePage/>
  )
)}/>

 

　　1. to:string

　　　　鏈接到的路徑名或位置。

　　2. to:object

　　　　要鏈接的位置。

　　3. push:bool

　　　　當為true時，重定向會將新條目推入歷史記錄，而不是替換當前條目

　　4. from:string

　　　　要重定向的路徑名。 這可以用於在<Switch>內部渲染<Redirect>時匹配位置。

六、Route

　　

import { BrowserRouter as Router, Route } from 'react-router-dom'

<Router>
  <div>
    <Route exact path="/" component={Home}/>
    <Route path="/news" component={NewsFeed}/>
  </div>
</Router>

 

　　1. Route props

　　　　所有三種渲染方法都將通過相同的三個路由屬性

• 　match
• 　location
• 　history

 

　　2.  component

　　　　僅當location匹配時才呈現的React組件。 

 

當用戶實際上沒有點擊時，這在服務器端渲染場景中很有用，因此該位置從未實際更改。 因此，名稱：static。 當您只需要插入一個位置並對渲染輸出進行斷言時，它也可以用於簡單的測試。這是一個示例節點服務器，為<Redirect>發送302狀態代碼，為其他請求發送常規HTML

　　　　當您使用組件（而不是下面的渲染）時，路由器使用React.createElement從給定組件創建一個新的React元素。 這意味着如果你提供一個內聯函數，你會得到很多不必要的新安裝。 對於內聯渲染，請使用render prop（下圖）。

　　3.  render:function

　　這允許方便的在線渲染和包裝，而不需要上述的不必要的重新安裝。不需要使用組件支持為您創建一個新的React元素，所以當位置匹配時，您可以傳入一個要調用的函數。 渲染道具接收與構件渲染道具相同的所有路由屬性。

　　4. children:function

　　　　有時您需要渲染路徑是否匹配該位置。 在這些情況下，您可以使用函數child prop。 它的工作原理就像渲染，除了它被調用是否有一個匹配或者沒有。兒童渲染支柱接收與組件和渲染方法所有相同的路線道具，除非路由失敗匹配URL，則匹配為null。 這允許您根據路線是否匹配來動態調整您的UI。 在這里，如果路由匹配，我們添加一個激活樣式

　　5. path

　　　　沒有路徑的路由總是匹配。　　

　　6.  exact: bool

　　　　當為真時，僅當位置匹配完全時才會應用活動類/樣式。

　　7.  strict: bool

　　　　當為真時，在確定位置是否與當前網址匹配時，將考慮位置路徑名上的尾部斜線。 有關詳細信息，請參閱<Route strict>文檔。

六、 StaticRouter

　　說明：當用戶實際上沒有點擊時，這在服務器端渲染場景中很有用，因此該位置從未實際更改。 因此，名稱：static。 當您只需要插入一個位置並對渲染輸出進行斷言時，它也可以用於簡單的測試。這是一個示例節點服務器，為<Redirect>發送302狀態代碼，為其他請求發送常規HTML 

import { createServer } from 'http'
import React from 'react'
import ReactDOMServer from 'react-dom/server'
import { StaticRouter } from 'react-router'

createServer((req, res) => {

  // This context object contains the results of the render
  const context = {}

  const html = ReactDOMServer.renderToString(
    <StaticRouter location={req.url} context={context}>
      <App/>
    </StaticRouter>
  )

  // context.url will contain the URL to redirect to if a <Redirect> was used
  if (context.url) {
    res.writeHead(302, {
      Location: context.url
    })
    res.end()
  } else {
    res.write(html)
    res.end()
  }
}).listen(3000)

 

七、 Switch

　　　說明：渲染與位置匹配的第一個小孩<路線>或<重定向>。這不同於僅使用一堆<路線>，<Switch>是唯一的，因為它獨家呈現路線。相反，與位置匹配的每個<路線>都會包含。考慮這個代碼

如果URL是/ about，那么<About>，<User>和<NoMatch>將全部渲染，因為它們都與路徑匹配。這是通過設計，允許我們以許多方式在我們的應用程序中編寫<Route>，例如側邊欄和面包屑，引導選項卡等。但是，我們只想選擇一個<Route>來渲染。如果我們在/我們不希望也匹配/：用戶（或顯示我們的“404”頁面）。以下是使用Switch

　　

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={NoMatch}/>
</Switch>

 

現在，如果我們在/ about，<Switch>將開始尋找匹配的<Route>。 <Route path =“/ about”/>將匹配，<Switch>將停止尋找匹配並呈現<About>。類似地，如果我們在/ michael，那么<User>將呈現。這對於動畫轉換也是有用的，因為匹配的<Route>被渲染在與前一個相同的位置。