什麼是 React Router？

React Router 是 React 生態系中一個重要的 Library，主要處理 React 應用程式中的路由。開發者可以透過 React Router 建立具有多個視圖的單頁式應用，並通過 URL 導航在它們之間切換。

安裝 React Router 套件

npm i react-router-dom@6

使用 React Router

1. 首先，從 react-router-dom 中引入 BrowserRouter、Routes 和 Route 這三個元件。

import { BrowserRouter, Routes, Route } from "react-router-dom";

2. 在最外層的 App 使用引入的元件。

import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
	  <Routes>
	    <Route />
	  </Routes>
	</BrowserRouter>
  )
}

3. 接著就可以開始來設定路由，當我們的應用程式有一個 /product 的路由，可以在 Route 元件上設定 path 的屬性為 product，以及 element 屬性指向想要顯示的 Product 元件（別忘了將該元件引入）。

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Product from "./pages/Product";

function App() {
  return (
    <BrowserRouter>
	  <Routes>
        <Route path="product" element={<Product />} />
      </Routes>
    </BrowserRouter>
  )
}

4. 同理，我們可以新增更多的頁面，這邊可以看到 Homepage 元件的 path 屬性是使用斜線 /，表示當使用者訪問根路徑（例如：https://ithelp.ithome.com.tw/ ）的時候，將渲染 Homepage 元件。

import { BrowserRouter, Routes, Route } from "react-router-dom";
import HomePage from "./pages/HomePage";
import Product from "./pages/Product";
import Pricing from "./pages/Pricing";

function App() {
  return (
    <BrowserRouter>
	  <Routes>
	    <Route path="/" element={<HomePage />} />
		<Route path="product" element={<Product />} />
		<Route path="pricing" element={<Pricing />} />
      </Routes>
    </BrowserRouter>
  )
}

5. 當我們希望處理沒有匹配的路由時（例如 /abcd），可以透過 * 符號，將使用者導向到自定義元件 PageNotFound。

import { BrowserRouter, Routes, Route } from "react-router-dom";
import HomePage from "./pages/HomePage";
import Product from "./pages/Product";
import Pricing from "./pages/Pricing";
import PageNotFound from "./pages/PageNotFound";

function App() {
  return (
    <BrowserRouter>
	  <Routes>
	    <Route path="/" element={<HomePage />} />
		<Route path="product" element={<Product />} />
		<Route path="pricing" element={<Pricing />} />
		<Route path="*" element={<PageNotFound />} />
	  </Routes>
	</BrowserRouter>
  )
}

結語

React Router 是專為處理 React 應用程序中的路由而設計。透過 React Router 我們可以更好地組織和管理應用程式的路由邏輯，並提供無縫的使用者導航體驗。