使用 React Router 進行導航 React Js 第一部分 React 應用程式中的路由指南

歡迎回到我們的 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 <h1>Home Page</h1>;
};

export default Home;

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

const About = () => {
    return <h1>About Page</h1>;
};

export default About;

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

const Contact = () => {
    return <h1>Contact Page</h1>;
};

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 (
        <Router>
            <nav>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/about">About</Link>
                    </li>
                    <li>
                        <Link to="/contact">Contact</Link>
                    </li>
                </ul>
            </nav>
            <Switch>
                <Route path="/" exact component={Home} />
                <Route path="/about" component={About} />
                <Route path="/contact" component={Contact} />
            </Switch>
        </Router>
    );
};

export default App;

說明：

• Router：BrowserRouter 元件包裝了整個應用程序，支援路由。
• 連結：連結元件用於建立導航鏈接，無需重新載入頁面即可更改 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 <h1>User ID: {userId}</h1>;
};

export default User;

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

<Route path="/user/:userId" component={User} />

---

巢狀路由

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

巢狀路由範例：

1. 建立一個具有巢狀路由的 Dashboard 元件：

npm install react-router-dom

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

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

const Home = () => {
    return <h1>Home Page</h1>;
};

export default Home;

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

const About = () => {
    return <h1>About Page</h1>;
};

export default About;

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

const Contact = () => {
    return <h1>Contact Page</h1>;
};

export default Contact;

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

---

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

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

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

以上是使用 React Router 進行導航 React Js 第一部分 React 應用程式中的路由指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！