在 React 中使用 Router 将数据从一个页面传递到另一个页面答案

【问题标题】：Pass data from one page to another in React using Router在 React 中使用 Router 将数据从一个页面传递到另一个页面
【发布时间】：2026-01-10 13:20:03
【问题描述】：

我试图使用反应路由器和仅功能组件将一个字符串从一个页面传递到另一个页面，所以我创建了一个按钮来帮助我链接我的 2 个页面，但我无法传递我的弦。这是我在初始页面上的示例代码：

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

function FrontPageDesktop() {
  const [myString, setMyString] = useState("Hello");
  return (
    <Link
      to={{
        pathname: "/donate",
        myString,
      }}
    >
      <TouchableOpacity> DONATE NOW </TouchableOpacity>
    </Link>
  );
}

这是目标页面的代码：

function DonatePageDesktop(myProps) {
  const { myString } = myProps.location.state;

  return <Text>Hello{myString}</Text>;
}

谢谢！

【问题讨论】：

您的链接对象的格式似乎不正确。请阅读上面的文档here。此外，您似乎正在使用 react-native。如果是这样，文档链接是here
这是working example。如果它仍然无法正常工作，您还有其他问题。
@BrianThompson ，是的，这是一个很好的例子，但是，当将每个页面放在单独的文件中时，它们仍然不起作用！你能帮帮我吗？
独立文件无关紧要。如果您正确导入它们，那么它的行为将相同。如果导入不正确，您将收到不同类型的错误，那一定没问题。如果没有在问题中添加更多信息来说明您的代码和我的代码之间的区别，我将无能为力

标签： javascript reactjs react-native react-router

【解决方案1】：

根据documentation，您应该在Link 组件上使用state 传递数据：

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

function FrontPageDesktop() {
  const [myString, setMyString] = useState("Hello");
  return (
    <Link
      to={{
        pathname: "/donate",
        state: myString,
      }}
    >
      <TouchableOpacity> DONATE NOW </TouchableOpacity>
    </Link>
  );
}

【讨论】：

我收到一个错误：TypeError: Cannot read property 'myString' of null

【解决方案2】：

您可以像这样将对象中的state 键传递给Link 组件的to 属性

<Link
  to={{
    pathname: "/donate",
    state: { myString }
  }}
>
  <TouchableOpacity> DONATE NOW </TouchableOpacity>
</Link>

【讨论】：

我得到同样的错误：TypeError: Cannot read property 'myString' of null