react中路由跳轉及傳參的實現

1.useNavigate

useNavigate 是 React Router v6 中新增的一個 hook,可以用來進行路由跳轉。

使用 useNavigate hook 首先需要安裝 react-router-dom@next,然後在函數式組件中引入:

import { useNavigate } from 'react-router-dom';
function MyComponent() {
  const navigate = useNavigate();
  function handleClick() {
    navigate('/target-path');
  }
  return (
    <button onClick={handleClick}>跳轉到目標路徑</button>
  );
}

useNavigate 返回一個 navigate 函數,可以用來進行路由跳轉和監聽路由變化。與 history.push 不同,navigate 不會在瀏覽器歷史記錄中添加重復的路由記錄。如果需要添加新的歷史記錄,可以使用 navigate({ pathname, state }) 的形式。

import { useNavigate } from 'react-router-dom';
function MyComponent() {
  const navigate = useNavigate();
  function handleClick() {
    navigate('/target-path', { state: { name: 'John', age: 25 } });
  }
  return (
    <button onClick={handleClick}>跳轉到目標路徑</button>
  );
}

navigate 函數還可以接收一個 options 對象,可以用來配置路由跳轉的方式。以下是一些常用的配置選項:

  • replace:是否替換當前頁面的歷史記錄;
  • state:傳遞的狀態數據;
  • replace:是否替換當前頁面的歷史記錄;
  • shoudlNavigate:是否允許進行路由跳轉;
  • replace:是否替換當前頁面的歷史記錄。
import { useNavigate } from 'react-router-dom';
function MyComponent() {
  const navigate = useNavigate();
  function handleClick() {
    navigate('/target-path', {
      state: { name: 'John', age: 25 },
      replace: true,
      shouldNavigate: true
    });
  }
  return (
    <button onClick={handleClick}>跳轉到目標路徑</button>
  );
}

2.useLocation

在 React Router 中,可以通過 useLocation hook 來獲取傳遞的參數和路徑信息。以下是一個示例:

import { useLocation } from 'react-router-dom';
function TargetComponent() {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const name = searchParams.get('name');
  const age = searchParams.get('age');
  const data = location.state;
  return (
    <div>
      <p>當前路徑:{location.pathname}</p>
      <p>查詢參數:{`name=${name}, age=${age}`}</p>
      <p>狀態數據:{JSON.stringify(data)}</p>
    </div>
  );
}

在目標頁面中,可以通過 useLocation hook 獲取路由路徑信息和傳遞的參數,然後使用 URLSearchParams 對象和 location.state 屬性來獲取具體的值。其中:

  • location.pathname 表示當前頁面的路徑;
  • location.search 表示傳遞的查詢參數,可以使用 URLSearchParams 對象來進行解析;
  • location.state 表示傳遞的狀態數據,可以在目標頁面中獲取。

註意,在使用 URLSearchParams 對象時,需要先調用 new URLSearchParams(location.search) 來創建一個實例,然後調用 get 方法來獲取具體的參數值。

使用 useNavigate 進行路由跳轉並傳遞參數的示例如下:

import { useNavigate } from 'react-router-dom';
function MyComponent() {
  const navigate = useNavigate();
  function handleClick() {
    navigate('/target-path', { state: { name: 'John', age: 25 } });
  }
  return (
    <button onClick={handleClick}>跳轉到目標路徑</button>
  );
}

3.示例

在跳轉到目標路徑時,可以使用 state 選項來傳遞數據。在目標頁面中,可以使用 useLocation hook 獲取傳遞的數據,示例如下:

import { useLocation } from 'react-router-dom';
function TargetComponent() {
  const location = useLocation();
  const data = location.state;
  return (
    <div>
      <p>姓名:{data.name}</p>
      <p>年齡:{data.age}</p>
    </div>
  );
}

在目標頁面中,可以通過 location.state 屬性獲取傳遞的數據。註意,如果沒有傳遞數據,則 location.state 的值為 undefined,需要進行判斷處理。

到此這篇關於react中路由跳轉及傳參的實現的文章就介紹到這瞭,更多相關react 路由跳轉及傳參內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: