首頁 >web前端 >js教程 >React路由器V6：初學者指南

React路由器V6：初學者指南

尊渡假赌尊渡假赌尊渡假赌原創: 2025-02-08 11:33:11484瀏覽

React Router v6: A Beginner's Guide

>本教程提供了一個綜合指南，用於React Router V6，這是用於React應用程序的領先路由庫。了解如何在您的React項目中有效管理URL和導航。 >

密鑰學習點：

掌握React路由器v6：本指南涵蓋了在您的React應用程序中設置和使用React Router V6進行無縫導航和URL管理的基礎。路由導航和渲染：
，和等核心組件創建動態和嵌套路由，包括將路徑參數用於靈活路由。 <route></route>><link>高級路由技術：
的程序化導航以及React Rouyter v6.4中的最新增強功能，使您能夠為現代React應用程序構建複雜的路由解決方案。 useNavigate

React在具有多個視圖（頁面）的構建動態Web應用程序方面表現出色。與傳統的多頁應用程序不同，導航不應重新加載整個頁面。相反，視圖應在現有頁面中順利進行。 React路由器聲明地實現了這一目標，從而確保了無縫的用戶體驗。用戶期望：每個視圖的

唯一的URL：

允許書籤（例如，

>功能性返回/前向按鈕：www.example.com/products標準瀏覽器導航應按預期工作。
>嵌套視圖的URL：支持動態，嵌套結構（例如，
通過指定所需的路由結構： React路由器的聲明方法簡化了路由： example.com/products/shoes/101

>，

和其他React路由器API，使路由易於實現。

<code class="language-jsx"><route path="/about" element="{<About"></route>} /></code>

重要說明：<route></route>> React Router是由Remix軟件維護的第三方庫，而不是官方的Facebook/Meta產品。 <route></route><link>概述：

此教程封面：

>使用NPM設置React Router。

> 基本路由概念。

嵌套路由。

帶有路徑參數的動態嵌套路由。

完整的項目代碼可在GitHub上獲得（鏈接要在此處插入）。
設置React Router：

>您需要安裝node.js。如果沒有，請從官方Node.js網站下載。考慮使用版本管理器進行更輕鬆的node.js管理。 NPM（Node Package Manager）與node.js捆綁在一起。驗證安裝：

<code class="language-jsx"><route path="/about" element="{<About"></route>} /></code>

>使用Create React App：創建一個新的React項目：

<code class="language-bash">node -v
npm -v</code>

安裝React Router dom：

<code class="language-bash">npx create-react-app react-router-demo
cd react-router-demo</code>

啟動開發服務器：

<code class="language-bash">npm install react-router-dom</code>

您的React應用程序與React路由器現在正在運行

>。 http://localhost:3000/

React Router基礎知識：>

我們將創建一個具有三個視圖的應用程序：家庭，類別和產品。 > 路由器組件

>用路由器包裝主應用程序組件：>>>。（使用HTML5歷史記錄API）通常是清潔URL的首選：

歷史對象

BrowserRouter每個路由器都會創建一個管理導航堆棧的歷史記錄對象。更改位置觸發重新渲染。 HashRouter（掛鉤）為程序化導航提供了BrowserRouter函數。

>鏈接和路由組件

<code class="language-bash">npm start</code>

如果位置與路徑匹配，則

>

呈現UI。

提供導航，而沒有頁面重新加載。 useNavigate navigate> update

：

這設置了基本的導航和路由。 <route></route> <link>

嵌套路由：

App.js嵌套路由將

組件放在其他

<code class="language-jsx">// src/index.js
import { BrowserRouter } from 'react-router-dom';
// ...
root.render(
  <react.strictmode>
    <browserrouter>
      <app></app>
    </browserrouter>
  </react.strictmode>
);</code>

>組件中。這反映了嵌套的URL結構。

修改

：

創建

：<route></route> <route></route>

App.js組件在父路線中呈現子路由。 >

<code class="language-jsx">import { Link, Route, Routes } from 'react-router-dom';
// ... component definitions for Home, Categories, Products ...
export default function App() {
  return (
    <div>
      <nav>
        <ul>
          <li>
<link to="/">Home</li>
          <li>
<link to="/categories">Categories</li>
          <li>
<link to="/products">Products</li>
        </ul>
      </nav>
      <routes>
        <route path="/" element="{<Home"></route>} />
        <route path="/categories" element="{<Categories"></route>} />
        <route path="/products" element="{<Products"></route>} />
      </routes>
    </div>
  );
}</code>

>動態嵌套路由：>

>使用路徑參數創建動態路由。將尾隨的Categories.js添加到父路線，以允許子路由。使用

訪問參數。

<code class="language-jsx">import { Link, Route, Routes } from 'react-router-dom';
import { Categories, Desktops, Laptops } from './Categories'; // Import nested route components

// ... other components ...

export default function App() {
  return (
    <div>
      {/* ... navigation ... */}
      <routes>
        <route path="/" element="{<Home"></route>} />
        <route path="/categories" element="{<Categories"></route>}>
          <route path="desktops" element="{<Desktops"></route>} />
          <route path="laptops" element="{<Laptops"></route>} />
        
        <route path="/products/*" element="{<Products"></route>} /> {/* Note the trailing * */}
      </routes>
    </div>
  );
}</code>

> update<outlet></outlet>：

參數使用

>。

*保護路線： useParams

>使用

進行程序化重定向並創建一個自定義Products.js組件。

<code class="language-jsx">import { Link, Outlet } from 'react-router-dom';

export const Categories = () => (
  <div>
    <h2>Categories</h2>
    <nav>
      <ul>
        <li>
<link to="desktops">Desktops</li>
        <li>
<link to="laptops">Laptops</li>
      </ul>
    </nav>
    <outlet></outlet>
  </div>
);

export const Desktops = () => <h3>Desktop PC Page</h3>;
export const Laptops = () => <h3>Laptops Page</h3>;</code>

創建

：:productId Product useParams>添加一個

組件，然後集成

到中以保護>路由。請記住原始響應中提到的安全考慮。

useNavigate React Router V6.4及以後：PrivateRoute>

> React Router V6.4引入了數據加載和突變API（受到混音的啟發）。這些API使用加載程序和操作簡化了路線內的數據獲取和管理。本節將需要一個單獨的，更詳細的說明。

> PrivateRoute.js

摘要：

<code class="language-jsx">// ... (import statements and productData) ...

const Products = () => (
  <div>
    <h2>Products</h2>
    <ul> {/* ... linkList (generated from productData) ... */} </ul>
    <routes>
      <route path=":productId" element="{<Product" data="{productData}"></route>} />
      <route index element="{<p">Please select a product.} />
    </route></routes>
  </div>
);

// ... Product component ...</code>

>本教程提供了React Router V6的全面概述，涵蓋了基本和高級路由概念。請記住要查閱官方的React Router文檔以獲取最新信息和詳細信息。

以上是React路由器V6：初學者指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 npm Object if for date using protected JS function dom this location history github http ui Access router Other

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何使用Next.js和SurveyJS構建閃電快速調查下一篇：如何使用Next.js和SurveyJS構建閃電快速調查

看更多