快捷導(dǎo)航

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

更新時(shí)間：2023年05月05日 15:44:59 作者：這個(gè)很好吃

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

1.useNavigate

useNavigate 是 React Router v6 中新增的一個(gè) hook，可以用來(lái)進(jìn)行路由跳轉(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)到目標(biāo)路徑</button>
  );
}

useNavigate 返回一個(gè) navigate 函數(shù)，可以用來(lái)進(jìn)行路由跳轉(zhuǎn)和監(jiān)聽(tīng)路由變化。與 history.push 不同，navigate 不會(huì)在瀏覽器歷史記錄中添加重復(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)到目標(biāo)路徑</button>
  );
}

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

replace：是否替換當(dāng)前頁(yè)面的歷史記錄；
state：傳遞的狀態(tài)數(shù)據(jù)；
replace：是否替換當(dāng)前頁(yè)面的歷史記錄；
shoudlNavigate：是否允許進(jìn)行路由跳轉(zhuǎn)；
replace：是否替換當(dāng)前頁(yè)面的歷史記錄。

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)到目標(biāo)路徑</button>
  );
}

2.useLocation

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

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>當(dāng)前路徑：{location.pathname}</p>
      <p>查詢(xún)參數(shù)：{`name=${name}, age=${age}`}</p>
      <p>狀態(tài)數(shù)據(jù)：{JSON.stringify(data)}</p>
    </div>
  );
}

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

location.pathname 表示當(dāng)前頁(yè)面的路徑；
location.search 表示傳遞的查詢(xún)參數(shù)，可以使用 URLSearchParams 對(duì)象來(lái)進(jìn)行解析；
location.state 表示傳遞的狀態(tài)數(shù)據(jù)，可以在目標(biāo)頁(yè)面中獲取。

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

使用 useNavigate 進(jìn)行路由跳轉(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)到目標(biāo)路徑</button>
  );
}

3.示例

在跳轉(zhuǎn)到目標(biāo)路徑時(shí)，可以使用 state 選項(xiàng)來(lái)傳遞數(shù)據(jù)。在目標(biāo)頁(yè)面中，可以使用 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>
  );
}

在目標(biāo)頁(yè)面中，可以通過(guò) location.state 屬性獲取傳遞的數(shù)據(jù)。注意，如果沒(méi)有傳遞數(shù)據(jù)，則 location.state 的值為 undefined，需要進(jìn)行判斷處理。

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

您可能感興趣的文章: