ReactJS - 路由：React 應用程序導航初學者指南

你好，未來的 React 開發者！今天，我們將踏上一段令人興奮的旅程，探索 React 路由的世界。作為你鄰居的電腦科學老師，我將指導你掌握這個重要概念，讓你的 React 應用程序更上一層樓。所以，請繫好安全帶，我們一起來探索吧！

ReactJS - Routing

React 中的路由是什麼？

在我們開始之前，讓我們假設你正在蓋一個房子。你房子裡的每個房間就像是你的網頁應用程序中的一個不同頁面。現在，如果你能夠在不重建整個房子的情況下，在這些房間之間移動，那該有多好？這正是 React 路由所做的！

路由讓我們能夠創建一個具有多個視圖的單頁應用程序，使用戶能在不重新加載整個應用程序的情況下，導航到不同的組件（或「頁面」）。這就像有一扇神奇的門，可以立刻帶你到房子裡的任何房間！

安裝 React Router

要開始在 React 中使用路由，我們需要安裝一個叫做 React Router 的流行庫。別擔心；這簡單得像派一樣！

打開你的終端機，導航到你 React 專案目錄，然後運行以下命令：

npm install react-router-dom

這個命令告訴 npm（Node 包管理器）為我們安裝 React Router 包。當它安裝完畢後，我們就可以開始路由了！

React Router：基礎知識

現在，我們已經安裝了 React Router，讓我們學習如何使用它。我們將從一個簡單的例子開始，然後逐漸增加我們的知識。

步驟 1：導入必要的組件

首先，我們需要從 React Router 導入所需的組件。在你的主 App.js 檔案頂部添加以下行：

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

步驟 2：設置路由器

接下來，我們將用 Router 組件包裹我們整個應用程序。這告訴 React 我們想在應用程序中啟用路由：

function App() {
return (
<Router>
{/* 你的應用程序內容放在這裡 */}
</Router>
);
}

步驟 3：定義路由

現在，讓我們定義一些路由。我們將創建三個簡單的組件：Home、About 和 Contact。

function Home() {
return <h2>歡迎來到我們的首页！</h2>;
}

function About() {
return <h2>在這個 About 頁面上了解更多關於我們的信息。</h2>;
}

function Contact() {
return <h2>通過這個 Contact 頁面與我們聯繫。</h2>;
}

為這些組件設置路由，我們使用 Route 組件：

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

這裡發生了什麼：

exact 關鍵字確保只有在路徑為 "/" 時才渲染 Home 組件。
每個 Route 組件都有一個 path 屬性（URL）和一個 component 屬性（在該路徑上渲染的組件）。

步驟 4：添加導航

為了讓用戶能在這些路由之間導航，我們將使用 Link 組件：

function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">首页</Link>
</li>
<li>
<Link to="/about">關於</Link>
</li>
<li>
<Link to="/contact">聯繫</Link>
</li>
</ul>
</nav>

<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
);
}

Link 組件就像一個超級強大的 <a> 標籤。它允許在不完全重新加載頁面的情況下進行導航。

嵌套路由

現在我們已經掌握了基礎知識，讓我們來提升一個層次，使用嵌套路由。想像一下你有一個 "Products" 頁面，並且在這個頁面內，你想要展示不同類別的產品。

這是我們如何設置嵌套路由的方式：

function Products() {
return (
<div>
<h2>我們的產品</h2>
<ul>
<li>
<Link to="/products/electronics">電子產品</Link>
</li>
<li>
<Link to="/products/books">書籍</Link>
</li>
</ul>

<Route path="/products/electronics" component={Electronics} />
<Route path="/products/books" component={Books} />
</div>
);
}

function Electronics() {
return <h3>查看我們最新的設備！</h3>;
}

function Books() {
return <h3>探索我們廣泛的書籍收藏！</h3>;
}

在這個例子中，Products 組件包含了它自己的路由。當你導航到 "/products/electronics" 時，你會看到 Products 組件和 Electronics 組件。

React Router 的優勢

React Router 提供了多種優勢，使其成為在 React 應用程序中處理路由的流行選擇。讓我們來分解它們：

優勢	描述
動態路由	路由定義為應用程序組成的一部分，而不是在配置文件中。
嵌套路由	易於創建具有嵌套路由結構的複雜 UI。
歷史控制	提供對瀏覽器歷史堆疊的細粒度控制。
代碼拆分	讓代碼拆分變得容易，提高應用程序性能。
聲明式路由	將路由定義為 React 組件，使其更直觀且更容易管理。

結論

恭喜你！你已經邁出了進入 React 路由世界的第一步。我們已經介紹了安裝、基本路由、嵌套路由以及使用 React Router 的優勢。記住，像任何技能一樣，路由會隨著練習變得越來越容易。所以，不要害怕嘗試並建立你自己的路由應用程序。

當我們結束時，我想起一個學生曾經告訴我："React 路由就像蒙著眼睛在迷宮中導航。" 但在練習之後，同一個學生回來說："現在就像我有了地圖和手電筒！" 我希望這個教程為你的 React 路由旅程提供了那個地圖和手電筒。

持續編程，持續學習，最重要的是，在建立令人驚奇的 React 應用程序時玩得開心！

Credits: Image by storyset