歡迎回到我們的 React 系列！在先前的文章中，我們介紹了元件、狀態、道具和事件處理等基本概念。現在，是時候使用 React Router 探索 React 應用程式中的路由了。路由允許您在應用程式內的不同視圖或元件之間導航，從而創建無縫的使用者體驗？ .

什麼是 React 路由器？

React Router 是一個功能強大的函式庫，可以在 React 應用程式中實現路由。它允許您在應用程式中定義多個路由並根據 URL 路徑呈現特定元件。此功能對於建立導覽不需要重新載入整頁的單頁應用程式 (SPA) 至關重要。

安裝 React Router
首先，您需要安裝 React Router。您可以使用 npm 來執行此操作：

npm install react-router-dom

設定基本路由

讓我們設定一個具有多個路由的簡單應用程式。我們將創建一個帶有主頁、關於頁面和聯絡頁面的應用程式。

1.建立基本元件
首先，建立三個元件：主頁、關於和聯絡方式。

// Home.js
import React from 'react';

const Home = () => {
    return 
Home Page
;
};

export default Home;

// About.js
import React from 'react';

const About = () => {
    return 
About Page
;
};

export default About;

// Contact.js
import React from 'react';

const Contact = () => {
    return 
Contact Page
;
};

export default Contact;

2.設定路由器
現在，讓我們在主應用程式檔案（通常是 App.js）中設定路由器。

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

const App = () => {
    return (
        
            
            
                
                
                
            
        
    );
};

export default App;

解釋：

• Router：BrowserRouter元件包裝了整個應用程序，實現路由。
• Link：Link 元件用於建立導航鏈接，無需重新加載頁面即可更改 URL。
• Route：Route元件定義路徑以及路徑匹配時要渲染的元件。
• Switch：Switch元件確保一次只渲染一條路線。

在頁面之間導航
設定完成後，您現在可以透過點擊導覽功能表中的連結在主頁、關於和聯絡頁面之間導覽。 React Router 將處理 URL 變更並渲染適當的元件，而無需刷新頁面。

路由參數
您也可以使用參數定義路由，從而允許傳遞動態資料。例如，我們建立一個 User 元件，根據 URL 中的使用者 ID 顯示使用者資訊。

1.建立使用者元件
使用者.js:

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

const User = () => {
    const { userId } = useParams();
    return 
User ID: {userId}
;
};

export default User;

2.更新路由器
在 App.js 中新增 User 元件的路由：

嵌套路由

React Router 也支援嵌套路由，它允許您在父元件中渲染子路由。這對於建立複雜的佈局很有用。

嵌套路由範例：

1. 建立具有嵌套路由的 Dashboard 元件：

// Dashboard.js
import React from 'react';
import { Route, Link, Switch } from 'react-router-dom';
import Settings from './Settings';
import Profile from './Profile';

const Dashboard = () => {
    return (
        

            
Dashboard
            
            
                
                
            
        
    );
};

export default Dashboard;

1. 更新您的 App.js 以包含儀表板路線：

現在，導覽至 /dashboard/profile 或 /dashboard/settings 將在儀表板中呈現對應的元件。

在這篇文章中，我們探討如何使用 React Router 在 React 應用程式中實現路由。我們介紹了設定基本路由、在頁面之間導航、使用路由參數以及建立巢狀路由。

利用這些概念，您可以為 React 應用程式建立結構化導航系統，從而增強使用者體驗並實現動態內容渲染。

在下一篇文章中，我們將深入研究 React Hooks 的使用，重點關注 useEffect 以及它如何管理功能元件中的副作用。敬請關注！