如何在React Router中透過按鈕點選導航路徑？

---

React應用程式通常需要一種方便的方法來根據使用者的操作（例如點選按鈕）導航不同的路由。然而，執行此類任務的最大障礙是有效地執行導航，而不會重新載入整個頁面或破壞單頁面應用程式 (SPA) 體驗。這篇文章展示瞭如何在react-router中透過點選按鈕有效地導航路徑。

先決條件

您需要安裝Node.js和您首選的程式碼編輯器來搭建React開發環境。除此之外，您還需要使用npm或yarn安裝react-router-dom。

安裝react-router-dom模組

npm install react-router-dom

專案結構

無需建立任何檔案或目錄，我們將使用預設專案結構。

方法

以下步驟說明了在React應用程式中透過點選按鈕在路徑上建立功能性導航的基礎知識。

步驟1：安裝路由功能

第一步是在您的終端安裝react-router-dom包以訪問React路由功能。您必須將您的應用程式包裝在``和``中，以確保您已在整個應用程式中啟用了路由。

步驟2：定義路由

在本節中，您的任務將涉及使用已安裝的react-router-dom包中的Routes和Route元件來定義React應用程式中的不同路徑。為確保一切順利執行，您應該確保每個路徑都對映到一個相應的元件，以便在訪問該路由時進行渲染。

步驟3：初始化useNavigate Hook

在您可以匯入和使用useNavigate Hook之前，請找到要在其中單擊按鈕觸發導航的元件。本節中的下一步是在按鈕的onClick事件中呼叫navigate('/desired-path')，這將幫助您導航到指定的資料夾。

步驟4：插入內聯CSS

如果您想美化React應用程式的外觀，建議插入內聯CSS樣式。內聯CSS樣式方法不需要安裝額外的包。但是，如果您想訪問更多樣式功能，也可以安裝像Styled Components這樣的CSS-in-JS庫。

示例

在這裡，我們建立了一個主頁，它導航到“關於”頁面，您可以為此建立不同的檔案，但這裡我們使用單個檔案以保持簡單。

// File name - App.js
import React from 'react';
import { BrowserRouter as Router, Route, Routes, useNavigate } from 'react-router-dom';

function Home() {
  const navigate = useNavigate();

  const handleNavigation = () => {
    navigate('/about');
  };

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1 style={{ color: '#333', fontFamily: 'Arial' }}>Home Page</h1>
      <button
        style={{
          backgroundColor: '#4CAF50',
          color: 'white',
          border: 'none',
          padding: '10px 20px',
          textAlign: 'center',
          textDecoration: 'none',
          display: 'inline-block',
          fontSize: '16px',
          margin: '10px 2px',
          cursor: 'pointer',
          borderRadius: '5px',
        }}
        onClick={handleNavigation}
      >
        Go to About Page
      </button>
    </div>
  );
}

function About() {
  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1 style={{ color: '#333', fontFamily: 'Arial' }}>About Page</h1>
    </div>
  );
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

輸出

在這裡您可以看到，我們可以透過點選按鈕導航到“關於我們”頁面。

結論

在上面的文章中，我們介紹瞭如何安裝react-router-dom包以訪問React中的路由功能。我們還介紹瞭如何使用react-router-dom包建立主頁和導航按鈕，該按鈕將您重定向到“關於”頁面。上面的示例旨在讓您瞭解React的基本工作原理。但是，您也可以嘗試使用多個頁面進行導航功能測試，以便更好地掌握這項技術。