如何使用 react-router 使用单独页面的信息更新页面?

Question

我有一个有两个页面的应用程序，为了简单起见，我们称它们为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>})});
);
}

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

Answer 1

您可以使用 React Context API 执行此操作 - https://reactjs.org/docs/context.html

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

对于您来说，您可以在两个页面共享的第一级(在常规组件或在路由器或路由器之前(注册上下文，然后在传递两个 props 之间与相同的数据进行交互

Answer 2

您正在使用 react router，因此您可以在组件中使用 this.props.history.push((，您必须按下按钮才能切换到下一个组件并发送数据。

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

/* === <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>})});
);
}

并且需要路由器 HOC 才能访问历史记录对象。