我有以下代码.(也可在CodeSandbox:https://codesandbox.io/s/dreamy-aj-sxs411?file=/src/index.js上使用)

App.js

import { Route, Routes } from "react-router-dom";
import Test01 from "./Test01";
import Test02 from "./Test02";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Test01 />} />
      <Route path="/test02" element={<Test02 />} />
    </Routes>
  );
}

export default App;

Test01.js

import React from "react";
import { Link } from "react-router-dom";

function Test01() {
  const pathname = "/test02";
  const docId = "12345";

  return (
    <div>
      <Link to={{ pathname: pathname, state: { docId: docId } }}>
        Go to target page with docId
      </Link>
    </div>
  );
}

export default Test01;

Test02.js

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

function Test02() {
  const location = useLocation();
  const docId = location.state?.docId || "Default Doc ID";

  return (
    <div>
      <h1>Target Page</h1>
      <p>Doc ID: {docId}</p>
    </div>
  );
}

export default Test02;

如果我运行Reaction页面,我无法获得正确的文档ID,并且它只显示默认的文档ID.这里有什么问题?

推荐答案

state应该是Link中的单独props ,而不是toprops 的一部分:

      <Link state={{ docId: docId }} to={{ pathname: pathname }}>
        Go to target page with docId
      </Link>

Reactjs相关问答推荐

Reactjs中的chartjs和reaction-chartjs-2的问题

在每页上应用字体-NextJS

我如何在不被 destruct 的情况下将导航栏固定在顶部?

在react上隐藏源映射

使用 MUI 菜单时添加新 html 元素时布局意外滚动跳转

在 React 中,如何在指向同一组件的路由中拥有未定义数量的多个动态路径段?

当从子状态更改复制时,react 父状态更改.我该如何防止这种情况?

验证 Yup 中的对象项

在 golang 服务器中刷新或直接 url 路径时响应 404

解决在React测试库中的act()警告

React Router 6 点击链接在 React 18 应用中打开 flickr 页面

try 从 React JS 构建此教程游戏但无法继续前进

ReactJS 动态禁用按钮

一周前刚开始学习React,一直在调试为什么输入框在每次输入后都没有焦点

在 Spring Cloud Gateway 中运行的 React SPA 页面刷新出现白标错误

哪个是创建 React 应用程序的更好方法?

将鼠标悬停在仅适用于该类的第一个实例的 p5.js 类上

在 Redux 中更新布尔状态时出错

服务器端分页未按预期工作

可以'读取未定义的属性(读取'路径')