路由（URL）携带参数跳转

最新推荐文章于 2024-05-03 21:05:41 发布

UiDj_5656

最新推荐文章于 2024-05-03 21:05:41 发布

阅读量469

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/UiDj_5656/article/details/132357526

版权

一、用于页面导航的链接

import { Link } from "react-router-dom";
//...
<Link to={{
    pathname: '/detailsalarm/detailsalarm/Dxx',
    search: `?productionId=${item.id}&productionType=${item.title}`
}}>
    跳转
</Link>

1、import { Link } from "react-router-dom";：这一行代码导入了 react-router-dom 库中的 Link 组件，该组件用于创建导航链接，允许你在应用中实现页面之间的导航。

2、<Link to={{ pathname: '/detailsalarm/detailsalarm/Dxx', search: ?productionId=${item.id}&productionType=${item.title} }}>跳转</Link>：这是一个 JSX 元素，它使用 Link 组件来创建一个导航链接。让我来分解它的属性：

to 属性：这是 Link 组件的一个属性，用于指定链接的目标位置。在这里，to 属性是一个对象，包含两个字段：
- pathname：表示要导航到的路径名。在这里，路径名是 /detailsalarm/detailsalarm/Dxx。
- search：表示查询字符串部分。这里使用模板字符串将查询参数嵌入其中，参数包括 productionId 和 productionType，它们分别从 item.id 和 item.title 获取。
<Link> 内容：在这里，元素的内容是字符串 "跳转"，这将作为链接的文本显示。

二、展示详情页面的内容及功能：

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

function DetailsAlarmPage() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const productionId = queryParams.get('productionId');
  const productionType = queryParams.get('productionType');
  const productionDatetime = queryParams.get('productionDatetime');

  return (
    <div>
      <h2>Details Alarm Page</h2>
      <p>Production ID: {productionId}</p>
      <p>Production Type: {productionType}</p>
      <p>Production Datetime: {productionDatetime}</p>
      {/* 其他渲染逻辑 */}
    </div>
  );
}

export default DetailsAlarmPage;

import React from 'react';：导入 React 库，这是构建用户界面的 JavaScript 库。
import { useLocation } from 'react-router-dom';：导入 useLocation 钩子函数，它来自于 react-router-dom 库。这个钩子函数用于访问当前页面的 URL 信息，包括路径和查询参数。
function DetailsAlarmPage() { ... }：这是一个名为 DetailsAlarmPage 的函数组件的定义。
const location = useLocation();：使用 useLocation 钩子函数获取当前页面的 URL 信息，包括路径和查询参数。
通过 new URLSearchParams(location.search) 创建一个 URLSearchParams 对象，它可以帮助我们从查询参数字符串中获取特定参数的值。
const productionId = queryParams.get('productionId');：从查询参数中获取名为 productionId 的参数值。
const productionType = queryParams.get('productionType');：从查询参数中获取名为 productionType 的参数值。
const productionDatetime = queryParams.get('productionDatetime');：从查询参数中获取名为 productionDatetime 的参数值。
在组件的返回部分，使用 JSX 语法渲染页面内容。展示了 productionId、productionType 和 productionDatetime 的值，以及一个标题和其他可能的渲染逻辑

三、一个异步函数 onclick，当调用该函数时，它会使用 navigate 函数来进行页面导航，并传递一个名为 state 的对象作为附加数据。

const onclick = async () => {
  navigate('/detailsalarm/detailsalarm/Dxx', {
    state: { name: 'John', data: 'Some data' }
  });
};

const onclick = async () => { ... }：这是一个异步箭头函数的定义，名为 onclick。这意味着当调用 onclick 函数时，其中的代码将被执行。
navigate('/detailsalarm/detailsalarm/Dxx', { state: { name: 'John', data: 'Some data' } });：这是 onclick 函数的主体部分。在这里，代码使用了一个 navigate 函数来进行页面导航，同时将一个包含附加数据的对象传递给目标页面。
- /detailsalarm/detailsalarm/Dxx：这是要导航到的目标路径，其中 /detailsalarm/detailsalarm/Dxx 是路径名。
- { state: { name: 'John', data: 'Some data' } }：这是传递给目标页面的状态对象。state 对象包含两个字段：
  - name 字段的值为 'John'：这是一个示例，表示一个名为 John 的数据。
  - data 字段的值为 'Some data'：这同样是示例数据，表示一些额外的信息。
navigate 函数的作用是进行页面导航，类似于点击链接或执行其他导航操作。

四、展示详情页面的内容及功能：

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

const DetailsAlarmPage = () => {
  const location = useLocation();
  const state = location.state || {};

  return (
    <div>
      <h2>Details Alarm Page</h2>
      <p>Name: {state.name}</p>
      <p>Data: {state.data}</p>
    </div>
  );
};

export default DetailsAlarmPage;

import React from 'react';：导入 React 库，这是构建用户界面的 JavaScript 库。
import { useLocation } from 'react-router-dom';：导入 useLocation 钩子函数，它来自于 react-router-dom 库。这个钩子函数用于访问当前页面的 URL 信息，包括路径和可能的状态。
const DetailsAlarmPage = () => { ... }：这是一个使用箭头函数语法定义的名为 DetailsAlarmPage 的函数组件。
const location = useLocation();：使用 useLocation 钩子函数获取当前页面的 URL 信息，包括路径和状态。
const state = location.state || {};：从 location 对象中获取状态数据。如果状态数据不存在，就默认设置为空对象 {}。这是为了避免在状态未定义时发生错误。
在组件的返回部分，使用 JSX 语法渲染页面内容。展示了通过页面导航传递的状态数据的内容，即 state.name 和 state.data。
- <p>Name: {state.name}</p>：渲染状态中的 name 字段的值。
- <p>Data: {state.data}</p>：渲染状态中的 data 字段的值。

<li onClick={() => onclick(a)}>

onClick={() => onclick(a)}：这是给列表项添加点击事件处理函数的部分。
- onClick：这是 React 中处理点击事件的属性，当用户点击列表项时会触发这个事件。
- () => onclick(a)：这是一个箭头函数，它定义了点击事件处理函数。当用户点击列表项时，这个函数将被调用。
  - a：实际上，这段代码可能是在一个循环中，用于渲染多个列表项。每个列表项可能都有自己的 a里数据。这里的 a也 可能代表了当前遍历的对象。
onclick：这应该是一个点击事件处理函数的名字或引用。根据你的代码上下文，这个函数可能是之前你定义过的。它接收一个参数a.

const onclick = async (a) => {
  navigate('/detailsalarm/detailsalarm/Dxx', {
    state: {a}
  });
};

const onclick = async (a) => { ... }：这是一个异步箭头函数的定义，名为 onclick。这个函数接收一个参数 a，在点击事件中传递。
navigate('/detailsalarm/detailsalarm/Dxx', { state: {a} });：这是 onclick 函数的主体部分。在这里，代码使用了 navigate 函数来进行页面导航，同时将一个包含附加数据的对象传递给目标页面。
- /detailsalarm/detailsalarm/Dxx：这是要导航到的目标路径，其中 /detailsalarm/detailsalarm/Dxx 是路径名。
- { state: {a} }：这是传递给目标页面的状态对象。state 对象包含一个字段 a，它的值来自函数的参数 a，这个参数是在点击事件中传递的。
navigate 函数的作用是进行页面导航，类似于点击链接或执行其他导航操作。