ReactJS - BrowserRouter

路由是前端應用中的一個重要概念。React 社群提供了一個優秀的路由庫，稱為 React Router。本章我們將學習 React 路由的概念以及如何在 React 應用中使用它。

路由概念

路由的主要目的是將給定的 URL 匹配到一個 React 元件並渲染匹配的元件。除了匹配和渲染之外，路由還應該管理瀏覽器的歷史記錄，以便在瀏覽器中實現高效的前進和後退導航。

在瞭解路由的工作原理之前，讓我們瞭解一些 React Router 庫的有用元件。

BrowserRouter − BrowserRouter 是頂級元件。它建立一個歷史記錄（導航歷史記錄），將初始位置（表示“使用者當前位置”的路由物件）放入 React 狀態中，最後訂閱位置 URL。

<BrowserRouter>
   <!-- children -->
</BrowserRouter>

Routes − Routes 將遞迴其子節點並構建路由配置。它將配置的路由與位置匹配，並渲染第一個匹配的路由元素。

<BrowserRouter>
   <Routes>
      <Route path="/" element={<App />}>
         <Route index element={<Home />} />
            <Route path="admin" element={<Admin />}>
            <Route path="product" element={<ProductListing />} />
            <Route path="category" element={<CategoryListing />} />
            <Route index element={<Dashboard />} />
         </Route>
      </Route>
      <Route path="/login" element={<Login />}>
         <!-- more nested routes -->
      </Route>
      <!-- more routes -->
   </Routes>
</BrowserRouter>

這裡：

/ 路徑對映到 App 元件。
/ 路徑的索引元件對映到 Home 元件。
/admin 路徑對映到 Admin 元件。
/admin 路徑的索引元件對映到 Dashboard 元件。
/admin/product 路徑匹配到 ProductListing 元件。
/admin/category 路徑匹配到 CategoryListing 元件。
/admin/dashboard 路徑匹配到 Dashboard 元件。

Route − Route 是實際的路由配置。它可以像資料夾一樣巢狀到任何級別。

Outlet − Outlet 元件渲染一組匹配中的下一個匹配項。

function Hello() {
   return (
      <div>Hello</div>
      <Outlet />
   )
}

這裡：

將 Outlet 元件放置在 hello 元件的底部。
路由器將在 Outlet 元件內渲染下一個匹配項。

Link − Link 元件類似於錨點標籤，用於導航目的。一旦使用者點選它，它就會根據其 to 屬性更改位置。

<Link to="/admin" />

navigate() − navigate() 是一個用於導航目的的 API，類似於 Link 元件。

navigate("/admin")

路由工作流程

讓我們考慮一個 React 應用程式具有如下所示的五個頁面/元件：

首頁 (/)
聯絡 (/contact)
註冊 (/register)
管理員 (/admin)
管理員儀表盤 (/admin/dashboard)

一個示例路由配置如下：

<BrowserRouter>
   <Routes>
      <Route path="/" element={<App />}>
         <Route index element={<Home />} />
         <Route path="contact" element={<Contact />} />
         <Route path="register" element={<Register />} />
         <Route path="admin" element={<Admin />}>
         <Route path="dashboard" element={<AdminDashboard />} />
         <Route path="category" element={<CategoryListing />} />
         <Route index element={<AdminDashboard />} />
      </Route>
   </Routes>
</BrowserRouter>

讓我們看看管理員儀表盤 URL (/admin/dashboard) 如何被 React 路由匹配和渲染。

首先，React 庫將渲染我們的應用程式。由於我們的應用程式在渲染樹的頂部具有 BrowserRouter，因此它會被呼叫和渲染。
BrowserRouter 元件建立一個歷史記錄，將初始位置放入狀態中，並訂閱 URL。
Routes 元件將檢查其所有子節點，構建路由配置，最後渲染第一個匹配項 (/admin => )
Admin 元件將被渲染。它將有一個 Outlet 元件，如下所示：

function Admin() {
   return (
      <div>
         <!-- Admin content -->
      </div>
   <Outlet />
   )
}

Outlet 元件在其內部渲染下一個匹配項 (/admin/dashboard => )
使用者可能會點選儀表盤中的一個連結（Link 元件），例如“/admin/category”
Link 元件呼叫 navigate("/admin/category") 方法
歷史記錄 (物件) 更改 URL 並通知 BrowserRouter
由於 BrowserRouter 元件已訂閱 URL，因此 BrowserRouter 元件將重新渲染，整個過程將重複（從 2 開始）。

如何應用路由

首先，建立一個新的 React 應用程式，並使用以下命令啟動它。

create-react-app myapp
cd myapp
npm start

接下來，使用以下命令安裝 React Router 庫：

npm install --save react-router-dom

接下來，開啟 App.css (src/App.css) 並刪除所有 CSS 類。

// remove all css classes

接下來，在 src 下建立一個資料夾 Pages，並建立一個新的主頁元件 Home (src/Pages/Home.js)，並渲染簡單的主頁內容，如下所示：

function Home() {
   return <h3>Home</h3>
}
export default Home

接下來，建立一個新的問候頁面元件 Greeting (src/Pages/Greeting.js)，並渲染簡單的問候訊息，如下所示：

function Greeting() {
   return <h3>Hello World!</h3>
}
export default Greeting;

接下來，開啟 App.js 檔案並渲染一個 BrowserRoutes 元件，如下所示：

import './App.css'
import React from 'react';

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Layout from './Pages/Layout';
import Home from './Pages/Home';
import Greeting from './Pages/Greeting';

function App() {
   return (
      <BrowserRouter>
         <Routes>
            <Route path="/" element={<Layout />}>
               <Route index element={<Home />} />
               <Route path="greet" element={<Greeting />} />
            </Route>
         </Routes>
      </BrowserRouter>
   );
}
export default App;

這裡：

BrowserRouter 是主要元件。它將擁有路由設定作為其子元件，並根據路由設定渲染整個應用程式。
Routes 是主要的路由元件。它儲存單個路由設定的列表。
Route 是實際的路由元件，它具有 web 路徑 (/home) 和元件 (Home) 之間的對映。
Route 可以巢狀以支援巢狀路徑。

路由中定義的對映如下：

/ 對映到 Layout 元件。Layout 元件將在下一步建立。
/home 對映到 Home 元件，它巢狀在 / 路徑下。
/greet 對映到 Greet 元件，它巢狀在 / 路徑下。

接下來，建立一個佈局元件 Layout (src/Pages/Layout.js)。佈局元件的目的是顯示帶有導航連結的整個應用程式。它是應用程式的主要元件，指向 / 路由。Layout 元件的原始碼如下：

import { Outlet, Link } from "react-router-dom";
function Layout() {
   return (
      <>
         <nav>
            <ul>
               <li>
                  <Link to="/">Home</Link>
               </li>
               <li>
                  <Link to="/greet">Greeting</Link>
               </li>
            </ul>
         </nav>
         <Outlet />
      </>
   )
}
export default Layout;

這裡：

匯入了 Link 和 Outlet 元件。
Link 元件用於建立 web 導航連結。
Link 元件的 to 屬性設定為父 BrowserRouter 元件中定義的路由之一。
使用了 / 和 /greet 路由，它們在路由設定中可用。
Outlet 元件用於底部載入選定的元件。在初始渲染期間，它將載入預設元件 (home)。
一旦使用者點選 web 連結，它將從 to 屬性獲取路由路徑，並透過路由設定獲取對映的元件。最後，它將在 Outlet 元件內渲染元件。

接下來，建立一個新元件 PageNotAvailable (src/Pages/PageNotAvailable.js)，用於顯示連結與任何路由設定都不匹配的情況。

import { Link } from "react-router-dom"
function PageNotAvailable() {
   return (
      <p>The page is not available. Please <Link to=
      "/">click here</Link> to go to home page.</p>
   )
}
export default PageNotAvailable

這裡，Link 元件用於導航回主頁。

接下來，更新 App 元件並在路由設定中包含 PageNotAvailable 元件。

import './App.css'
import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Layout from './Pages/Layout';
import Home from './Pages/Home';
import Greeting from './Pages/Greeting';
import PageNotAvailable from './Pages/PageNotAvailable'
function App() {
   return (
      <BrowserRouter>
         <Routes>
            <Route path="/" element={<Layout />}>
               <Route index element={<Home />} />
               <Route path="greet" element={<Greeting />} />
               <Route path="*" element={<PageNotAvailable />} />
            </Route>
         </Routes>
      </BrowserRouter>
   );
}
export default App;

這裡：

當用戶點選連結時，React 路由器將嘗試按照給定的順序一一匹配點選的連結和路由設定。如果匹配到連結，則 React 路由器將停止並渲染匹配的元件。
* 模式將匹配所有連結。由於它作為最後一個條目放置，因此它將匹配所有未定義/未知連結。

接下來，更新 Layout 元件並新增一個不可用的連結來檢查 PageNotAvailable 元件是否已正確配置。

import { Outlet, Link } from "react-router-dom";
function Layout() {
   return (
      <>
         <nav>
            <ul>
               <li>
                  <Link to="/">Home</Link>
               </li>
               <li>
                  <Link to="/greet">Greeting</Link>
               </li>
               <li>
                  <Link to="/unknown">Unavailable page</Link>
               </li>
            </ul>
         </nav>
         <Outlet />
      </>
   )
}
export default Layout;

最後，在瀏覽器中開啟應用程式並檢查最終結果。應用程式將按如下所示進行渲染：

使用者可以使用上面輸出中顯示的導航連結導航到任何頁面。

總結

React Router 易於配置和使用。它沒有太多花哨的功能，但具有必要的特性，例如連結、出口、路由和路由，可以建立一個具有導航連結的完整 web 應用程式。

列印頁面