如何使用 react-router 使用来自单独页面的信息更新页面？答案

【问题标题】：How to update page with info from separate page, using react-router?如何使用 react-router 使用来自单独页面的信息更新页面？
【发布时间】：2019-12-25 04:17:54
【问题描述】：

我有一个包含两个页面的应用程序，为简单起见，我们将它们称为 AddItem 和 ItemList。我的困难在于它们需要在自己的页面上（/add-item/ & /items/），我不确定如何在两者之间传递数据，因为它们并不真正共享一个共同的父级。

我不想使用回调函数，因为它需要多个级别的信息传递。

/* === <Add Item> === */
export default props => {
  const [name, setName] = useState("");

  return(
      <>
        <input value={name} onChange={e=>{setName(e.target.value)}} />
        <button onClick={SUBMIT_ITEM} />
      </>
  );
}


/* === <ItemList> === */
export default props => {
  const [items, setItems] = useState([
    {
      name: "Default"
    },
    {
      name: "Second Default"
    }
  ]);

  return(
    items.map(item=>{return({<p>item</p>})});
  );
}

各自的两个部分都做了他们需要做的事情。我只是不确定如何在它们之间传递数据。当 AddItem 页面上的提交按钮被按下时，我需要将它添加到 ItemList。有没有一种好方法可以做到这一点，同时将它们放在单独的页面上？谢谢！

【问题讨论】：

如果您想在同一域上的不同 JavaScript 应用程序之间传递信息，您可以随时使用 Web 存储 API（localStorage 或 sessionStorage。）使用简单，内置于浏览器。你可以在这里阅读更多信息：developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API
在渲染路线时，您可以传递额外的道具。你也可以使用上下文来传递数据，或者 redux.. 真的取决于你的用例

标签： reactjs react-router react-hooks

【解决方案1】：

您正在使用反应路由器，因此您可以在组件中使用 this.props.history.push() ，您必须按下按钮切换到下一个组件并发送数据。

在下一个组件中，您可以使用 this.props 从道具中提取所需的数据。在您的代码中，它看起来像：

    /* === <Add Item> === */
    export default props => {
  const [name, setName] = useState("");
  handleClick = () => {
    this.props.history.push("/items", state: {name})
  }
  return(
      <>
        <input value={name} onChange={e=>{setName(e.target.value)}} />
        <button onClick={handleClick} />
      </>
  );
}

在 ItemList 组件中你会得到它们：

  export default ItemList = (props) => {
  const name = this.props.state.name
  const [items, setItems] = useState([
    {
      name: "Default"
    },
    {
      name: "Second Default"
    }
  ]);

  return(
    items.map(item=>{return({<p>item</p>})});
  );
}

withRouter HOC 需要访问历史对象。

【讨论】：

【解决方案2】：

你可以使用 React Context API - https://reactjs.org/docs/context.html

根据文档-“上下文提供了一种通过组件树传递数据的方法，而无需在每个级别手动向下传递道具。”

对您而言，您可以在两个页面共享的第一级注册上下文（在通用组件处或在路由器处或之前），然后在两个好像传递的道具之间与相同的数据进行交互

【讨论】：