接下來的的文章會介紹到 React Router 的應用，由於內容比較多，因此會分成上、下兩個部份來介紹。
這篇文章主要會介紹 Router 的概念及設置，下一篇文章則會介紹 Router 中的 <Link> 以及路由參數的使用。

Router 路由控制

目的：在 React 中切換其他頁面

在 React 中，所有的路由與頁面內容切換都由瀏覽器處理

1. 初次載入
   • 瀏覽器向伺服器請求 → 伺服器回傳一個空的 HTML 以及已經編譯好的React JavaScript檔案，這些檔案會負責控制React的應用程式
2. React 接手
   • React 透過我們建立的元件，動態把內容插入，組成真正的頁面
3. 點擊連結時
   • React Router 會介入並攔截請求，不讓瀏覽器重新向伺服器請求整個頁面
   • React Router 會根據新的頁面路徑，直接在畫面上顯示對應的元件
4. 優點
   • 不需要每次都重新載入整個 HTML 頁面
   • 提升效能，切換更快，使用者體驗更順暢

下載路由

建立新的終端機

npm install react-router-dom （最新版本）

在package.json就可以看到目前的版本
例如：

"react-router-dom": "^7.8.2",

如何新增一個頁面元件並設定路由

先在 src 資料夾下面建立一個檔案

const (...) = () => {
  return (
    <div>
      (...)
    </div>
  );
};

export default (...);

再到路由中使用這個元件

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import (...) from './(...)';
     
    <Router>
      <div className=(...)>
        <Routes>
          <Route path="/(...)" element={<Component />} />
         </Route>            
      </Routes>

程式碼解釋：

1. <Router>：負責提供「路由環境」
   必須包住整個應用程式，讓 React 能夠管理不同路徑之間的切換
2. <Routes>：負責根據當前的網址，決定要渲染哪個頁面內容
   確保同一時間只會渲染「第一個符合的路由」，避免同時出現多個頁面
3. <Route>：定義「特定路徑對應的元件」
   用 element={<Component />} ，指定在該路徑下要渲染的內容

範例：

Create.js

const Create = () => {
  return (
    <div className="create">
      <h2>新增 Blog</h2>
    </div>
  );
}
 
export default Create;

App.js

import "./App.css";
import Home from './Home';
import Navbar from "./Navbar";
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Create from "./Create";

function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />
        <div className="content">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/create" element={<Create />}>
            </Route>            
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

瀏覽器執行畫面