如何使用 React Router DOM-魔扣目錄

介紹

歡迎來到我們關(guān)于 react router dom 的深入教程！如果您是一名 ui 開發(fā)人員，希望通過動態(tài)路由功能增強 react 應用程序，那么您來對地方了。 react router dom 是一個功能強大的庫，允許您創(chuàng)建具有多個視圖的單頁面應用程序，同時保持流暢、無縫的用戶體驗。

在這份綜合指南中，我們將引導您了解有關(guān) react router dom 所需了解的所有內(nèi)容，從基本概念到高級技術(shù)。無論您是 react 新手還是希望提高技能的經(jīng)驗豐富的開發(fā)人員，本教程都將為您提供在 react 應用程序中有效實現(xiàn)路由所需的知識和實際示例。

那么，讓我們一起深入探索 react router dom 的世界吧！

react router dom 入門

什么是 react router dom？

react router dom 是 react 應用程序的流行路由庫。它允許您在單頁應用程序 (spa) 中創(chuàng)建動態(tài)的客戶端路由。使用 react router dom，您可以根據(jù)當前 url 輕松管理不同的視圖和組件，為您的用戶提供無縫的導航體驗。

安裝 react router dom

開始在 react 應用程序中實現(xiàn)路由之前，我們需要安裝 react router dom 包。打開終端并導航到項目目錄，然后運行以下命令：

npm install react-router-dom

登錄后復制

這將在您的項目中安裝最新版本的 react router dom。

基本設置

要開始在應用程序中使用 react router dom，您需要導入必要的組件并使用 browserrouter 組件包裝主應用程序組件。以下是如何在 index.js 文件中設置 react router dom 的基本示例：

import react from 'react';
import reactdom from 'react-dom';
import { browserrouter } from 'react-router-dom';
import app from './app';

reactdom.render(
  <browserrouter><app></app></browserrouter>,
  document.getelementbyid('root')
);

登錄后復制

現(xiàn)在我們已經(jīng)完成了基本設置，讓我們探索 react router dom 的核心組件以及如何有效地使用它們。

react router dom 的核心組件

路線與路線

路由和路由組件是 react router dom 的構(gòu)建塊。它們允許您定義應為應用程序中的每個路線呈現(xiàn)的不同路徑和組件。

這是如何使用這些組件的示例：

import react from 'react';
import { routes, route } from 'react-router-dom';
import home from './components/home';
import about from './components/about';
import contact from './components/contact';

function app() {
  return (
    <routes><route path="/" element="{&lt;home"></route>} /&gt;
      <route path="/about" element="{&lt;about"></route>} /&gt;
      <route path="/contact" element="{&lt;contact"></route>} /&gt;
    </routes>
  );
}

export default app;

登錄后復制

在此示例中，我們定義了三個路由：主頁（“/”）、關(guān)于頁面（“/about”）和聯(lián)系頁面（“/contact”）。每個路由都與一個特定的組件相關(guān)聯(lián)，當訪問相應的 url 時，該組件將被渲染。

鏈接組件

link 組件用于在應用程序中創(chuàng)建導航鏈接。它是 react router dom 的重要組成部分，因為它允許用戶在不同視圖之間移動，而不會觸發(fā)整個頁面重新加載。

以下是如何使用鏈接組件：

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

function navigation() {
  return (
    <nav><ul>
<li>
<link to="/">home</li>
        <li>
<link to="/about">about</li>
        <li>
<link to="/contact">contact</li>
      </ul></nav>
  );
}

export default navigation;

登錄后復制

導航鏈接組件

navlink 組件與 link 類似，但它提供了用于設置活動鏈接樣式的附加功能。這對于創(chuàng)建要突出顯示當前活動頁面的導航菜單特別有用。

這是如何使用 navlink 的示例：

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

function navigation() {
  return (
    <nav><ul>
<li>
          <navlink to="/" style="{({" isactive> isactive ? { color: 'red' } : undefined}&gt;
            home
          </navlink>
</li>
        <li>
          <navlink to="/about" style="{({" isactive> isactive ? { color: 'red' } : undefined}&gt;
            about
          </navlink>
</li>
        <li>
          <navlink to="/contact" style="{({" isactive> isactive ? { color: 'red' } : undefined}&gt;
            contact
          </navlink>
</li>
      </ul></nav>
  );
}

export default navigation;

登錄后復制

在此示例中，我們使用 isactive 屬性將紅色應用于活動鏈接。

高級路由技術(shù)

現(xiàn)在我們已經(jīng)介紹了基礎知識，讓我們探索一些可以使用 react router dom 實現(xiàn)的更高級的路由技術(shù)。

嵌套路由

嵌套路由允許您在應用程序中創(chuàng)建更復雜的路由結(jié)構(gòu)。這對于使用共享組件創(chuàng)建布局或組織相關(guān)路線特別有用。

這是如何實現(xiàn)嵌套路由的示例：

import react from 'react';
import { routes, route, outlet } from 'react-router-dom';
import header from './components/header';
import footer from './components/footer';
import home from './components/home';
import about from './components/about';
import services from './components/services';
import servicedetails from './components/servicedetails';

function layout() {
  return (
    <div>
      <header></header><outlet></outlet><footer></footer>
</div>
  );
}

function app() {
  return (
    <routes><route path="/" element="{&lt;layout"></route>}&gt;
        <route index element="{&lt;home"></route>} /&gt;
        <route path="about" element="{&lt;about"></route>} /&gt;
        <route path="services" element="{&lt;services"></route>} /&gt;
        <route path="services/:id" element="{&lt;servicedetails"></route>} /&gt;
      
    </routes>
  );
}

export default app;

登錄后復制

在此示例中，我們創(chuàng)建了一個包含頁眉和頁腳的布局組件。 outlet 組件用于渲染布局內(nèi)的子路由。

動態(tài)路由和 url 參數(shù)

動態(tài)路線允許您創(chuàng)建可以處理可變路段的靈活路徑。這對于需要顯示特定項目的詳細信息（例如產(chǎn)品頁面或用戶個人資料）的場景非常有用。

以下是如何使用動態(tài)路由和訪問 url 參數(shù)的示例：

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

function productdetails() {
  const { productid } = useparams();

  return (
    <div>
      <h1>product details</h1>
      <p>you are viewing product with id: {productid}</p>
    </div>
  );
}

export default productdetails;

登錄后復制

要使用此組件，您需要定義如下路由：

<route path="/products/:productid" element="{&lt;productdetails"></route>} /&gt;

登錄后復制

程序化導航

有時您需要根據(jù)某些條件或用戶操作以編程方式進行導航。 react router dom 為此提供了 usenavigate 鉤子。

這是如何使用 usenavigate 的示例：

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

function loginform() {
  const navigate = usenavigate();

  const handlesubmit = (event) =&gt; {
    event.preventdefault();
    // perform login logic here
    // if login is successful, navigate to the dashboard
    navigate('/dashboard');
  };

  return (

登錄后復制

{/* form fields */}

);
}

export default loginform;

處理路由參數(shù)和查詢字符串

react router dom 提供了強大的工具來處理路由參數(shù)和查詢字符串，允許您創(chuàng)建動態(tài)且靈活的路由解決方案。

路由參數(shù)

我們已經(jīng)了解了如何通過 useparams 鉤子使用路由參數(shù)。讓我們通過一個更復雜的示例進一步探討這一點：

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

function blogpost() {
  const { category, postid } = useparams();

  return (
    <div>
      <h1>blog post</h1>
      <p>category: {category}</p>
      <p>post id: {postid}</p>
    </div>
  );
}

export default blogpost;

登錄后復制

要使用此組件，您需要定義如下路由：

<route path="/blog/:category/:postid" element="{&lt;blogpost"></route>} /&gt;

登錄后復制

這允許您創(chuàng)建像 /blog/technology/123 或 /blog/travel/456 這樣的 url，并從 url 中動態(tài)提取類別和帖子 id。

查詢字符串

查詢字符串對于將可選參數(shù)傳遞給路由非常有用。 react router dom 提供了 usesearchparams 鉤子來處理查詢字符串。

這是如何使用 usesearchparams 的示例：

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

function productlist() {
  const [searchparams, setsearchparams] = usesearchparams();
  const category = searchparams.get('category');
  const sortby = searchparams.get('sortby');

  return (
    <div>
      <h1>product list</h1>
      <p>category: {category || 'all'}</p>
      <p>sort by: {sortby || 'default'}</p>
      <button onclick="{()"> setsearchparams({ category: 'electronics', sortby: 'price' })}&gt;
        filter electronics, sort by price
      </button>
    </div>
  );
}

export default productlist;

登錄后復制

在此示例中，我們從查詢字符串中讀取類別和排序參數(shù)。我們還演示了如何使用 setsearchparams 函數(shù)更新查詢字符串。

保護路由并處理身份驗證

許多應用程序中的一個常見要求是根據(jù)用戶身份驗證狀態(tài)保護某些路由。 react router dom 可以與您的身份驗證邏輯結(jié)合使用來創(chuàng)建受保護的路由。

這是如何實現(xiàn)受保護路由的示例：

import react from 'react';
import { route, navigate } from 'react-router-dom';

function protectedroute({ element, isauthenticated, ...rest }) {
  return (
    <route element="{isauthenticated" : to="/login" replace></route>}
    /&gt;
  );
}

function app() {
  const [isauthenticated, setisauthenticated] = react.usestate(false);

  return (
    <routes><route path="/" element="{&lt;home"></route>} /&gt;
      <route path="/login" element="{&lt;login" setisauthenticated="{setisauthenticated}"></route>} /&gt;
      <protectedroute path="/dashboard" element="{&lt;dashboard"></protectedroute>}
        isauthenticated={isauthenticated}
      /&gt;
    </routes>
  );
}

export default app;

登錄后復制

在此示例中，我們創(chuàng)建了一個 protectedroute 組件來檢查用戶是否經(jīng)過身份驗證。如果是，則渲染指定的元素；如果沒有，它會將他們重定向到登錄頁面。

處理 404 頁面和重定向

react router dom 可以輕松處理 404（未找到）頁面并在必要時實現(xiàn)重定向。

404 頁

要創(chuàng)建 404 頁面，您可以在路由定義末尾使用 * 路徑：

import react from 'react';
import { routes, route } from 'react-router-dom';
import home from './components/home';
import about from './components/about';
import notfound from './components/notfound';

function app() {
  return (
    <routes><route path="/" element="{&lt;home"></route>} /&gt;
      <route path="/about" element="{&lt;about"></route>} /&gt;
      <route path="*" element="{&lt;notfound"></route>} /&gt;
    </routes>
  );
}

export default app;

登錄后復制

在此示例中，將為任何與定義的路徑不匹配的路線渲染 notfound 組件。

重定向

有時您可能需要將用戶從一條路線重定向到另一條路線。 react router dom 為此提供了 navigate 組件：

import react from 'react';
import { routes, route, navigate } from 'react-router-dom';
import home from './components/home';
import oldpage from './components/oldpage';
import newpage from './components/newpage';

function app() {
  return (
    <routes><route path="/" element="{&lt;home"></route>} /&gt;
      <route path="/old-page" element="{&lt;navigate" to="/new-page" replace></route>} /&gt;
      <route path="/new-page" element="{&lt;newpage"></route>} /&gt;
    </routes>
  );
}

export default app;

登錄后復制

在此示例中，任何嘗試訪問 /old-page 的用戶都會自動重定向到 /new-page。

通過代碼分割優(yōu)化性能

隨著應用程序的增長，您可能希望實現(xiàn)代碼分割以提高性能。 react router dom 與 react 的延遲加載功能配合得很好，允許您僅在需要時加載路由組件。

以下是如何使用 react router dom 實現(xiàn)代碼分割的示例：

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

const Home = lazy(() =&gt; import('./components/Home'));
const About = lazy(() =&gt; import('./components/About'));
const Contact = lazy(() =&gt; import('./components/Contact'));

function App() {
  return (
    <suspense fallback="{&lt;div">Loading...}&gt;
      <routes><route path="/" element="{&lt;Home"></route>} /&gt;
        <route path="/about" element="{&lt;About"></route>} /&gt;
        <route path="/contact" element="{&lt;Contact"></route>} /&gt;
      </routes></suspense>
  );
}

export default App;

In this example, we're using React's `lazy` function to dynamically import our components. The `Suspense` component is used to show a loading indicator while the component is being loaded.

登錄后復制

結(jié)論

恭喜！您現(xiàn)在已經(jīng)完成了有關(guān) react router dom 的綜合教程。我們涵蓋了從基本設置到嵌套路由、動態(tài)路由、身份驗證和代碼分割等高級技術(shù)的所有內(nèi)容。有了這些知識，您就可以在 react 應用程序中實現(xiàn)強大的路由解決方案了。

記住，掌握 react router dom 的關(guān)鍵是練習。嘗試在您自己的項目中實現(xiàn)這些概念，并且不要害怕嘗試不同的路由結(jié)構(gòu)和技術(shù)。隨著您對 react router dom 越來越熟悉，您會發(fā)現(xiàn)它為創(chuàng)建動態(tài)且用戶友好的 web 應用程序開辟了新的可能性。