了解 React Router：初學者逐步指南-js教程-PHP中文網

了解 React Router：初學者逐步指南

Linda Hamilton

發布： 2024-12-27 11:43:12

原創

878 人瀏覽過

Understanding React Router: A Step-by-Step Guide for Beginners

#React Router 是用於處理 React 應用程式中導航的最受歡迎的程式庫之一。它使開發人員能夠建立具有動態路由的單頁應用程式 (SPA)，從而創建無縫且響應迅速的用戶體驗。在本指南中，我們將探討 React Router 的基礎知識以及如何使用它在 React 應用程式中建立導航。

什麼是 React 路由器？

React Router 是一個函式庫，可讓您在 React 應用程式中管理導航和路由

為什麼要使用 React 路由器？

1.動態導航：

無需重新載入頁面即可在視圖之間實現平滑過渡。

2.聲明式路由：

路由是使用 JSX 定義的，使其易於閱讀和管理。

3. 嵌套路由：

允許複雜的路由層次結構。

4. 支援URL參數：

啟用基於 URL 的動態內容渲染。

React 路由器入門

安裝

要使用React Router，請透過npm或yarn安裝庫：
npm install react-router-dom
或
紗線添加react-router-dom

基本設定

以下是如何在簡單的 React 應用程式中設定 React Router：

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

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

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

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

export default App;

登入後複製

BrowserRouter：包裝應用程式並提供路由功能。
路由：用來定義多個路由的容器。
路線：定義路徑及其關聯組件

React Router 的主要特性

1. 動態路由

React Router 支援使用 URL 參數的動態路由。

import React from 'react';
import { BrowserRouter as Router, Routes, Route, useParams } from 'react-router-dom';

function User() {
  const { id } = useParams(); // Access the dynamic URL parameter
  return <h2>User ID: {id}</h2>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/user/:id" element={<User />} />
      </Routes>
    </Router>
  );
}

export default App;

登入後複製

2. 導航鏈接

使用 Link 或 NavLink 元件取代標籤以獲得更好的效能。

import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

登入後複製

連結：防止整頁重新加載，使導航更快。
NavLink：為目前活動路線提供活動樣式。

3. 延遲加載

透過延遲載入元件來最佳化效能。

import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

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

export default App;

登入後複製