ReactJS - BrowserRouter：React 路由入門指南

各位有志於成為 React 開發者的你們好！今天，我們將踏上一段令人興奮的旅程，探索 React 應用程序中的路由世界。別擔心你對編程是新手；我會成為你友好的導遊，一步步為你解釋一切。所以，來一杯咖啡，我們一起來深入探討吧！

ReactJS - BrowserRouter

路由概念

什麼是路由？

想像你在一個大型圖書館裡。你想要找一本特定的書，但你不知道它在哪裡。這時，圖書館的目錄就派上用場了。它告訴你確切的書架位置。在網頁應用程序中，路由的作用也是如此。它就像一張地圖，告訴你的應用程序根據 URL 顯示哪個組件。

我們為什麼需要路由？

假設你正在建立一個個人網站，有首頁、關於和聯繫等不同的頁面。如果沒有路由，你將不得不根據用戶操作手動顯示和隱藏組件。這既麻煩又容易出錯。路由自動化了這個過程，使你的應用程序更加有組織且用戶友好。

BrowserRouter 的引入

在 React 世界中，我們有一個非常好的工具叫做 BrowserRouter。它是 react-router-dom 庫的一部分，幫助我們在 React 應用程序中實現路由。把它想像成你應用程序的個人事務員，隨時準備引導用戶找到正確的"書"（在我們的例子中，是組件）。

如何應用路由器

現在，我們了解了概念，來動手寫一些代碼吧！

步驟 1：安裝

首先，我們需要安裝 react-router-dom 套件。打開你的終端並運行以下命令：

npm install react-router-dom

步驟 2：設定 BrowserRouter

讓我們從將主要的 App 組件包裹在 BrowserRouter 中開始。這樣做：

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';

const Root = () => (
<Router>
<App />
</Router>
);

export default Root;

在這個例子中，我們導入了 BrowserRouter 並將其重命名為 Router 以簡化。然後我們用 Router 包裹了 App 組件。這為我們的整個應用程序設定了路由上下文。

步驟 3：定義路由

現在，讓我們在 App 組件中定義一些路由：

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const App = () => (
<div>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</div>
);

export default App;

讓我們來分解這個：

我們從 react-router-dom 導入了 Route 和 Switch。
Switch 確保一次只渲染一個路由。
每個 Route 組件定義了一個 URL 路徑和一個 React 組件之間的映射。
首頁路由上的 exact 屬性確保它只匹配完全的路徑 "/"。

步驟 4：創建導航

現在，讓我們為我們的應用程序添加一些導航：

import React from 'react';
import { Link } from 'react-router-dom';

const Navigation = () => (
<nav>
<ul>
<li><Link to="/">首頁</Link></li>
<li><Link to="/about">關於</Link></li>
<li><Link to="/contact">聯繫</Link></li>
</ul>
</nav>
);

export default Navigation;

在這裡，我們使用 react-router-dom 的 Link 組件。它就像一個 <a> 標籤，但它阻止了在導航時重新加載頁面。

步驟 5：將所有東西整合起來

讓我們更新我們的 App 組件以包含導航：

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Navigation from './components/Navigation';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const App = () => (
<div>
<Navigation />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</div>
);

export default App;

這樣，你就擁有一個基本的 React 應用程序，並設定了路由。

高級路由技巧

現在，我們已經介紹了基礎知識，來看看一些更高级的技巧：

1. URL 參數

有時候，你想要通過 URL 傳遞數據。例如，一個用戶個人資料頁面：

<Route path="/user/:id" component={UserProfile} />

在你的 UserProfile 組件中，你可以這樣訪問 id 參數：

import { useParams } from 'react-router-dom';

const UserProfile = () => {
let { id } = useParams();
return <h1>用戶個人資料：{id}</h1>;
};

2. 嵌套路由

你可以將路由嵌套在組件內部。這對於複雜的佈局非常有用：

const App = () => (
<div>
<Navigation />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/users" component={Users} />
</Switch>
</div>
);

const Users = () => (
<div>
<h1>用戶</h1>
<Switch>
<Route exact path="/users" component={UserList} />
<Route path="/users/:id" component={UserProfile} />
</Switch>
</div>
);

3. 程式化導航

有時候，你想要程式化地進行導航，例如在表單提交後：

import { useHistory } from 'react-router-dom';

const LoginForm = () => {
let history = useHistory();

const handleSubmit = () => {
// ... 處理登錄邏輯
history.push('/dashboard');
};

return (
<form onSubmit={handleSubmit}>
{/* 表單字段 */}
</form>
);
};

路由方法表

這裡有一個方便的表格，總結了我們討論的主要路由方法：

方法	目的	示例
`<BrowserRouter>`	為應用程序包裝以啟用路由	`<BrowserRouter><App /></BrowserRouter>`
`<Route>`	定義一個路由	`<Route path="/about" component={About} />`
`<Switch>`	確保只渲染一個路由	`<Switch><Route ... /><Route ... /></Switch>`
`<Link>`	創建一個路由鏈接	`<Link to="/about">關於</Link>`
`useParams()`	訪問 URL 參數	`let { id } = useParams();`
`useHistory()`	程式化導航	`history.push('/dashboard');`

至此，我們已經通過 BrowserRouter 探索了 React 路由的基礎。記住，熟練來自練習，所以不要害怕在你的專案中嘗試這些概念。

祝你編程愉快，願你的路由總是引導你到正確的組件！

Credits: Image by storyset