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

Posted on by

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！

推薦閱讀：