極簡React Router示例

feellikelearning December 5, 2022 0 Comments

React Router是什麼？

React是一個用於構建用戶界面的JavaScript庫，它提供了一組工具來創建和維護可重用的UI組件，主要應用於單網頁應用。而React Router可以用於構建多網頁應用，它可以控制應用程序中的內容顯示，並且可以將瀏覽器的歷史記錄與應用程序的狀態保持同步。這樣，用戶就可以使用瀏覽器的前進和後退按鈕來導航應用程序中的不同部分。使用域名下的URL，都由完全由前端控制，不需要每個頁面都發送後台請求。

學習react router實現的例子

在本文中，我們將會實現一個純網頁的小應用。這個應用沒有後端，也沒有使用CSS。實現它只需要修改一個JS文件。應用的頂端有一個導航欄，分別對應/和/about兩個路由。點擊對應的超級鏈接後，網頁內容會更新為對應的組件(Component)。

詳細步驟

首先，您需要安裝 Node.js 和 npm，然後使用 npm 創建一個新的 React 項目：

npm init react-app my-app

在上面的命令中，我們使用 npm init 命令創建了一個名為 my-app 的 React 項目。這條命令會自動安裝 React 和相關的依賴，並且會在當前目錄中創建一個名為 my-app 的文件夾，用於存放項目的源代碼和配置文件。

接下來，您可以使用 npm 安裝 React Router 庫：

cd my-app
npm install react-router-dom

在上面的命令中，我們使用 cd 命令進入了項目文件夾，然後使用 npm install 命令安裝了 react-router-dom 庫。這個庫包含了 React Router 的所有組件，可以在 React 應用中實現路由功能。

安裝完成後，您可以在 React 應用中使用 React Router 的組件，修改App.js如下：

import React from 'react';
import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';

const App = () => (
  <BrowserRouter>
      <nav>
        <Link to="/">Home</Link> | 
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route exact path="/" element={<Home/>} />
        <Route path="/about" element={<About/>} />
      </Routes>
    </BrowserRouter>
);

const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;

export default App;

用npm運行網頁應用如下：

npm start