BrowserRouter、Routes、Link 和 useNavigate

React Router 是什麼？

React Router 是一個用於 React 應用程式導航的函式庫。

它幫助用戶在頁面之間移動而不刷新瀏覽器。

要安裝 React Router：

npm install react-router-dom

1. BrowserRouter

BrowserRouter 是主要的路由封裝。

它保持您的 UI 與瀏覽器 URL 同步。

範例：

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

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function App() {

  return (
    <BrowserRouter>

      <nav>
        <Link to="/">Home</Link>


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

      <Routes>
        <Route path="/" element={<Home />} />

        <Route path="/about" element={<About />} />
      </Routes>

    </BrowserRouter>
  );
}

export default App;

為何我們使用BrowserRouter？

沒有BrowserRouter，路由將不會運作

它實現了：

URL處理
導航
路由管理

2. 路由與路徑

Routes用於匯集所有路徑。

路徑定義了哪個組件應該載入以對應特定的 URL。

範例：

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

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

export default App;

說明
路徑載入的組件
/ 首頁
/about 關於

當使用者訪問 /about 時，React 會顯示關於組件。

3. 連結

通常，HTML 使用標籤來進行導航.

但在 React Router 中，我們使用 Link.

為何如此？

因為會重新載入頁面.
Link 能夠在不刷新的情況下切換頁面.

範例：

import { Link } from "react-router-dom";

function Navbar() {
  return (
    <div>
      <Link to="/">Home</Link>
      <br />

      <Link to="/about">About</Link>
    </div>
  );
}

export default Navbar;

輸出
點擊首頁會進入首頁
點擊關於會進入關於頁面
不會發生頁面刷新

4. useNavigate Hook

useNavigate是用於程式性導航

這意味著導航是透過 JavaScript 代码進行的

範例:

登入後
表單提交後
將使用者重新導向

範例：

import { useNavigate } from "react-router-dom";

function Login() {

  const navigate = useNavigate();

  function handleLogin() {
    alert("Login Successful");

    navigate("/home");
  }

  return (
    <div>
      <button onClick={handleLogin}>
        Login
      </button>
    </div>
  );
}

export default Login;

說明

當按鈕被點擊時：

出現警告訊息
使用者自動移至 /home
完整範例

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

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function Login() {

  const navigate = useNavigate();

  function loginUser() {
    navigate("/");
  }

  return (
    <button onClick={loginUser}>
      Go Home
    </button>
  );
}

function App() {

  return (
    <BrowserRouter>

      <Link to="/">Home</Link>
      <br />

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

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/login" element={<Login />} />
      </Routes>

    </BrowserRouter>
  );
}

export default App;

React Router 的優勢
快速導航
無需頁面刷新
提升用戶體驗
輕鬆的路由系統
適合 SPAs 運作

推薦訂閱源

DEV Community