React Router
Create React App 不包含頁面路由。
React Router 是最流行的解決方案。
新增 React Router
要將 React Router 新增到你的應用程式中，請在應用程式的根目錄的終端中執行此命令：
npm i -D react-router-dom
注意：本教程使用 React Router v6。
如果你從 v5 升級，則需要使用 @latest 標誌
npm i -D react-router-dom@latest
資料夾結構
要建立一個具有多個頁面路由的應用程式，讓我們先從檔案結構開始。
在 src 資料夾內，我們將建立一個名為 pages 的資料夾，其中包含幾個檔案
src\pages\:
Layout.jsHome.jsBlogs.jsContact.jsNoPage.js
每個檔案將包含一個非常基礎的 React 元件。
基本用法
現在我們將在 index.js 檔案中使用我們的 Router。
示例
使用 React Router 根據 URL 進行頁面路由
index.js:
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./pages/Layout";
import Home from "./pages/Home";
import Blogs from "./pages/Blogs";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="blogs" element={<Blogs />} />
<Route path="contact" element={<Contact />} />
<Route path="*" element={<NoPage />} />
</Route>
</Routes>
</BrowserRouter>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);示例解釋
我們首先用 <BrowserRouter> 包裹我們的內容。
然後我們定義我們的 <Routes>。一個應用程式可以有多個 <Routes>。我們的基本示例只使用了一個。
<Route>s 可以巢狀。第一個 <Route> 的 path 是 /，它渲染 Layout 元件。
巢狀的 <Route>s 繼承並擴充套件了父路由。因此，blogs 的 path 與父路由結合，變成了 /blogs。
Home 元件路由沒有 path，但有一個 index 屬性。這指定該路由是父路由（即 /）的預設路由。
將 path 設定為 * 將作為所有未定義 URL 的捕獲。這對於 404 錯誤頁面非常有用。
Pages / Components
Layout 元件包含 <Outlet> 和 <Link> 元素。
<Outlet> 渲染當前選中的路由。
<Link> 用於設定 URL 並跟蹤瀏覽歷史。
每當我們連結到內部路徑時，我們將使用 <Link> 而不是 <a href="">。
“佈局路由”是一個共享元件，它在所有頁面上插入通用內容，例如導航選單。
Layout.js:
import { Outlet, Link } from "react-router-dom";
const Layout = () => {
return (
<>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/blogs">Blogs</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Outlet />
</>
)
};
export default Layout;
Home.js:
const Home = () => {
return <h1>Home</h1>;
};
export default Home;
Blogs.js:
const Blogs = () => {
return <h1>Blog Articles</h1>;
};
export default Blogs;
Contact.js:
const Contact = () => {
return <h1>Contact Me</h1>;
};
export default Contact;
NoPage.js:
const NoPage = () => {
return <h1>404</h1>;
};
export default NoPage;
