React-Router-DOMnpm詳解

一、路由的概念

在Web應用中，路由簡單來說就是指根據不同的URL地址展示不同的內容或視圖。React-Router-DOMnpm是針對React框架開發的路由庫，它提供了一種基於組件的路由管理方式，使得React應用更易於構建和維護。

二、React-Router-DOMnpm基本使用

首先，我們需要在項目中安裝React-Router-DOMnpm的依賴包：

  
    npm install react-router-dom

接著，在React應用中引入React-Router-DOMnpm，並創建Router組件：

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

    const Home = () => {
      return (
        <div>
          <h2>Welcome to the Home page!</h2>
        </div>
      );
    }

    const App = () => {
      return (
        <Router>
          <Route exact path="/" component={Home} />
        </Router>
      );
    }

在上面的代碼中，我們首先定義了一個Home組件，並在App組件中使用BrowserRouter包裹整個應用，並定義了一個Route組件，將Home組件與根路徑（/）進行關聯。

三、基本組件

1. Route組件

Route組件是React-Router-DOMnpm提供的最基本組件，它用於定義URL地址和對應的組件關係。我們可以通過exact、path、component和render這些props值來定義Route組件的行為：

exact：定義是否嚴格匹配路由地址。
path：定義路由的URL地址。
component：定義路由地址對應的組件。
render：定義路由地址對應的渲染邏輯。

下面是一個Route組件的示例：

  
    <Route exact path="/" component={Home} />

2. Link組件

Link組件用於切換路由，即點擊Link組件後會渲染對應的組件。我們可以通過to這個props值來定義Link組件的行為：

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

    const App = () => {
      return (
        <Router>
          <Link to="/about">About</Link>
        </Router>
      );
    }

3. Redirect組件

Redirect組件用於在切換路由時跳轉到指定的URL地址。我們可以通過to這個props值來定義Redirect組件的行為：

  
    <Redirect to="/home" />

4. Switch組件

Switch組件用於匹配路由地址，並渲染符合條件的第一個組件，避免渲染多個組件並降低性能。我們可以通過Route組件的exact和path來定義Switch組件的行為：

  
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </Switch>

四、URL參數

URL參數是指通過URL地址傳遞的一些參數值，React-Router-DOMnpm提供了很好的支持。

1. Route組件的params屬性

Route組件的params屬性是一個包含URL參數的對象，我們可以通過這個屬性來獲取URL參數的值。

  
    const Users = ({match}) => {
      return (
        <div>
          <h2>User ID: {match.params.id}</h2>
        </div>
      );
    }

    const App = () => {
      return (
        <Router>
          <Route path="/users/:id" component={Users} />
        </Router>
      );
    }

在上面的代碼中，我們定義了一個Users組件，通過Route組件將它與URL地址/users/:id進行了關聯，通過match.params.id這個屬性獲取URL參數的值。

2. Query參數

Query參數指的是URL地址中問號後面的參數，我們可以通過Query string來傳遞這些參數值。

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

    const Users = () => {
      const location = useLocation();

      return (
        <div>
          <h2>User ID: {new URLSearchParams(location.search).get('id')}</h2>
        </div>
      );
    }

    const App = () => {
      return (
        <Router>
          <Link to="/users?id=1">View User 1</Link>
          <Route path="/users" component={Users} />
        </Router>
      );
    }

在上面的代碼中，我們定義了一個Users組件，並通過useLocation hook來獲取URL地址中的query參數，然後通過URLSearchParams API來獲取參數值。

五、嵌套路由

嵌套路由指的是在Route組件中嵌套其他的Route組件，從而形成一種多層級的路由關係。

  
    const Profile = ({match}) => {
      return (
        <div>
          <h2>Profile Page</h2>
          <Route path={`${match.path}/basic`} component={ProfileBasic} />
          <Route path={`${match.path}/detail`} component={ProfileDetail} />
        </div>
      );
    }

    const ProfileBasic = () => {
      return (
        <div>
          <h3>Basic Information</h3>
        </div>
      );
    }

    const ProfileDetail = () => {
      return (
        <div>
          <h3>Detail Information</h3>
        </div>
      );
    }

    const App = () => {
      return (
        <Router>
          <Route path="/profile" component={Profile} />
        </Router>
      );
    }

在上面的代碼中，我們定義了一個Profile組件，並通過Route組件嵌套了另外兩個子組件ProfileBasic和ProfileDetail，從而形成了一種基於路徑的多層級路由關係。

六、認識BrowserRouter和HashRouter

BrowserRouter和HashRouter是React-Router-DOMnpm提供的兩種路由實現方式。

1. BrowserRouter

BrowserRouter基於HTML5的History API實現，它使用了獨立於URL負載的歷史記錄堆棧來管理瀏覽歷史記錄，因此它可以響應pushState、replaceState和popstate事件，並在URL被修改時進行相應的視圖渲染。

2. HashRouter

HashRouter基於瀏覽器的URL片段實現，它使用URL hash值來跟蹤URL的狀態，因此它不會進行頁面刷新或重新載入，而是在URL hash值改變時只會進行視圖的重新渲染。

七、總結

React-Router-DOMnpm是一個非常強大的React路由庫，可以管理單頁面應用中複雜的路由行為。通過掌握Route、Link、Redirect、Switch等基本組件，以及掌握URL參數傳遞、嵌套路由和BrowserRouter與HashRouter的實現方式，我們可以輕鬆地構建複雜的React路由應用。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/184880.html