【React 學習筆記 EP.12】React Router

什麼是 React Router？

React Router 是一個幫助你在 React 應用程式中實現「頁面切換」的工具庫，使用時需安裝 react-router-dom 套件。

React Router 概念

1. BrowserRouter：包裹整個應用程式的容器，讓 Router 可以監聽網址變化。
2. Route：定義「哪個網址」對應「哪個元件（畫面）」的規則。
3. Link：取代傳統 <a> 標籤，讓頁面切換時不重新載入整個應用程式。

React Router 語法

1. <BrowserRouter>：最外層容器，啟用路由功能，通常包裹整個 App 。
2. <Routes>：路由群組，負責比對目前網址，只渲染第一個符合的 Route。
3. <Route>：單一路由規則。
4. path：要比對的網址路徑，例如 /about。
5. element：網址符合時，要顯示的 React 元件。
6. <Link to="/about">：點擊後切換到指定路徑。

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

// App.jsx
import "./App.css";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

const Home = () => { return <h1>這是首頁</h1>; };
const About = () => { return <h1>關於我們</h1>; };

const App = () => {
  return (
    <BrowserRouter>                          {/* 啟用路由的最外層容器 */}
      <nav>
        <Link to="/">首頁</Link> |            {/* 點擊切換到首頁，不重整頁面 */}
        <Link to="/about">關於我們</Link>     {/* 點擊切換到 /about */}
      </nav>
      <Routes>                               {/* 路由比對群組 */}
        <Route path="/" element={<Home />} />        {/* / 對應首頁元件 */}
        <Route path="/about" element={<About />} />  {/* /about 對應關於頁 */}
      </Routes>
    </BrowserRouter>
  );
};

export default App;