在 React 中建立多頁面應用程式：路由器教學

在 React Router 的幫助下，在 React 中建立多頁面應用程式非常簡單。 React Router 是一個功能強大的程式庫，可讓您在 React 應用程式中實現路由。在本文中，我們將逐步介紹使用 React Router 設定多頁面應用程式的步驟，涵蓋基本概念和程式碼範例以協助您入門。

什麼是 React 路由器？

React Router 是一個在 React 應用程式中啟用動態路由的函式庫。它可以幫助您管理導航並根據 URL 路徑呈現不同的元件。使用 React Router，您可以在單頁面應用程式中建立無縫的多頁面體驗。

入門

1.安裝React路由器

首先，你需要安裝React Router。開啟終端機並執行以下命令：

npm install react-router-dom

2. 設定項目結構

如果您還沒有的話，請建立一個基本的 React 專案。您的專案資料夾可能如下所示：

my-app/
├── public/
├── src/
│   ├── components/
│   │   ├── Home.js
│   │   ├── About.js
│   │   └── Contact.js
│   ├── App.js
│   ├── index.js
│   └── App.css
└── package.json

3.為每個頁面建立組件

為應用程式的每個頁面建立元件。在此範例中，我們將在元件資料夾中建立 Home.js、About.js 和 Contact.js。

Home.js

import React from 'react';

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

export default Home;

關於.js

import React from 'react';

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

export default About;

Contact.js

import React from 'react';

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

export default Contact;

4. 在 App.js 中設定路由

現在，在 App.js 檔案中設定路由。從react-router-dom匯入必要的元件並設定你的路由。

App.js

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

function 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>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
}

export default App;

在此程式碼中：

• BrowserRouter（別名 Router）用於處理路由。
• 路由定義了要渲染的路徑和元件。
• Routes 封裝了多個 Route 元件。
• Link 用於建立導航連結。

5.添加一些基本樣式

您可以在 App.css 中添加一些基本樣式，以使導航看起來更好。

App.css

nav {
  background-color: #333;
  padding: 10px;
}

nav ul {
  list-style: none;
  padding: 0;
}

nav ul li {
  display: inline;
  margin-right: 10px;
}

nav ul li a {
  color: white;
  text-decoration: none;
}

nav ul li a:hover {
  text-decoration: underline;
}

6. 運行您的應用程式

最後，使用以下命令運行您的 React 應用程式：

npm start

開啟瀏覽器並導航至 http://localhost:3000。您應該會看到具有有效導航連結的多頁面應用程式。

結論

使用 React Router，建立多頁面應用程式變得輕而易舉。您已經學習如何設定基本路由、建立頁面元件和管理導航。 React Router 的靈活性和易用性使其成為 React 開發人員的必備工具，可讓您建立動態且使用者友好的 Web 應用程式。

---

？你可以透過捐贈來幫助我

以上是在 React 中建立多頁面應用程式：路由器教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！