資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究React.js 路由基礎
React 路由的一些基礎知識
React-router 是主要的庫，而 react-router-dom 和 react-router-native 是特定環境的庫。React-router-dom 通常用於基於瀏覽器的 Web 應用程式。react-router-native 用於可以使用 react-native 開發的移動應用程式。
要安裝它，請使用命令 npm install –save react-router-dom
在 Web 應用程式的情況下，有兩種型別的路由器。
- BrowserRouter
- HashRouter
兩種路由器型別之間的區別體現在它們構建 URL 的方式上。
例如：http://hello.com/about => BrowserRouter
例如：http://hello.com/#/about => HashRouter（在其中使用雜湊）
BrowserRouter 更受歡迎，它使用 html5 history API 來跟蹤位置。
HashRouter 支援不支援 html5 history API 的舊版瀏覽器。
JavaScript History API：它有助於跟蹤導航、歷史堆疊，並在會話之間持久化位置狀態。元件建立 history 物件，該物件使用 history.location 跟蹤當前位置。
每次點選 Link 元件時都會呼叫 History.push()。如果點選 Redirect 元件，則會呼叫 history.replace。類似地，history.goBack 和 history.goForward 用於在歷史堆疊中向前和向後導航。
Route 元件是路由器中的主要元件，如果匹配，它將在頁面中顯示提供的元件。如果需要完全匹配 URL，則在路由路徑上新增 exact=true。Route 具有 render 屬性，用於處理內聯渲染。如果路徑完全匹配，則 Render 期望一個返回元素的函式。
Link 元件是用於在頁面之間導航的錨標記，無需重新載入頁面。
路由元件上的 path 屬性使用 path-to-RegExp 庫將字串轉換為正則表示式。當前位置將與之匹配。
一旦我們匹配了路由元件上給定的路徑和瀏覽器上的當前位置，就會建立一個包含以下資訊的匹配物件以供進一步使用：
match.path=>包含路由路徑值的字串。
match.url=>瀏覽器中 URL 的匹配部分。
match.isExact=>布林值。
switch - 使用 switch 的好處是它將返回第一個匹配的路由並丟棄其他路由。
如果沒有 switch，所有匹配的路徑都將被渲染。例如，如果瀏覽器中的 URL 為 /player，則路徑 /player 和 /player/1 都將被渲染。Switch 避免了多個路徑匹配。它將返回第一個匹配項。
基本示例
<BrowserRouter>
<Route exact path="/" component={MainPage}/>
<Route path="/users" component={Users}/>
<Route path="/login" component={Login}/>
<Route path="/customers" component={Customers}/>
</BrowserRouter>
420 次瀏覽
