快捷導(dǎo)航

react中路由跳轉(zhuǎn)及傳參的實現(xiàn)

更新時間：2023年05月05日 15:44:59 作者：這個很好吃

本文主要介紹了react中路由跳轉(zhuǎn)及傳參的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1.useNavigate

useNavigate 是 React Router v6 中新增的一個 hook，可以用來進行路由跳轉(zhuǎn)。

使用 useNavigate hook 首先需要安裝 react-router-dom@next，然后在函數(shù)式組件中引入：

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

useNavigate 返回一個 navigate 函數(shù)，可以用來進行路由跳轉(zhuǎn)和監(jiān)聽路由變化。與 history.push 不同，navigate 不會在瀏覽器歷史記錄中添加重復(fù)的路由記錄。如果需要添加新的歷史記錄，可以使用 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}>跳轉(zhuǎn)到目標路徑</button>
  );
}

navigate 函數(shù)還可以接收一個 options 對象，可以用來配置路由跳轉(zhuǎn)的方式。以下是一些常用的配置選項：

replace：是否替換當前頁面的歷史記錄；
state：傳遞的狀態(tài)數(shù)據(jù)；
replace：是否替換當前頁面的歷史記錄；
shoudlNavigate：是否允許進行路由跳轉(zhuǎn)；
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}>跳轉(zhuǎn)到目標路徑</button>
  );
}

2.useLocation

在 React Router 中，可以通過 useLocation hook 來獲取傳遞的參數(shù)和路徑信息。以下是一個示例：

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>查詢參數(shù)：{`name=${name}, age=${age}`}</p>
      <p>狀態(tài)數(shù)據(jù)：{JSON.stringify(data)}</p>
    </div>
  );
}

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

location.pathname 表示當前頁面的路徑；
location.search 表示傳遞的查詢參數(shù)，可以使用 URLSearchParams 對象來進行解析；
location.state 表示傳遞的狀態(tài)數(shù)據(jù)，可以在目標頁面中獲取。

注意，在使用 URLSearchParams 對象時，需要先調(diào)用 new URLSearchParams(location.search) 來創(chuàng)建一個實例，然后調(diào)用 get 方法來獲取具體的參數(shù)值。

使用 useNavigate 進行路由跳轉(zhuǎn)并傳遞參數(shù)的示例如下：

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}>跳轉(zhuǎn)到目標路徑</button>
  );
}

3.示例

在跳轉(zhuǎn)到目標路徑時，可以使用 state 選項來傳遞數(shù)據(jù)。在目標頁面中，可以使用 useLocation hook 獲取傳遞的數(shù)據(jù)，示例如下：

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 屬性獲取傳遞的數(shù)據(jù)。注意，如果沒有傳遞數(shù)據(jù)，則 location.state 的值為 undefined，需要進行判斷處理。

到此這篇關(guān)于react中路由跳轉(zhuǎn)及傳參的實現(xiàn)的文章就介紹到這了,更多相關(guān)react 路由跳轉(zhuǎn)及傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: