Reactjs 希望将用户发送到另一个页面，且该页面处于react中的特定状态

我的主页上有一个按钮，效果很好：

  <Link to="/pageItShouldRedirectTo">
    <button class="buttonStyling">
      Click to read article 3
    </button>    
  </Link>

点击阅读第3条

它将用户发送到pageItShouldRedirectTo。在pageItShouldRedirectTo上，我有一个按钮列表，可以在下面的空白处呈现不同的组件：

function ArticleSelection() {

const [displayComponent, setDisplayComponent] = useState(null);


return (
    <Button onClick={() => setDisplayComponent(<Article1/>)}>Click to see Article 1</Button>
    <Button onClick={() => setDisplayComponent(<Article2/>)}>Click to see Article 2</Button>
    <Button onClick={() => setDisplayComponent(<Article3/>)}>Click to see Article 3</Button>


{displayComponent}

)}

export default ArticleSelection

函数ArticleSelection（）{
const[displayComponent，setDisplayComponent]=useState（null）；
返回(
setDisplayComponent（）}>单击以查看文章1
setDisplayComponent（）}>单击以查看第2条
setDisplayComponent（）}>单击以查看第3条
{displayComponent}
)}
导出默认项目选择

这个部分本身也很好用。我单击一个按钮，它在{displayComponent}中呈现组件。但当我使用主页上的按钮时，我希望它将其与已呈现的第3条一起发送

---

我已经尝试了几种方法，但都没有成功。

有三种方法可以解决这个问题：

最简单，也是最不通用的方法是“提升状态”，如前所述。将状态（其中包含显示的项目的信息）上移到公共父级

使用react上下文（或用于共享状态存储的任何库，如react redux）。您可以设置在此类共享状态存储中显示的项目

在url中传递数据：

在源组件中：

别忘了用包装确保道具位置存在或使用挂钩。 此外，您可以使用而不是

链接

重定向，在这种情况下更方便

import url from 'url'

const whereToRedirect = url.format({
  pathname: `/pageItShouldRedirectTo`,
  query: {
    article: "third",
  },
})

// whereToRedirect should look something like this: /pageItShouldRedirectTo?article=third

...

<Link to={whereToRedirect }>
  <button class="buttonStyling">
    Click to read article 3
  </button>    
</Link>

const search = new URLSearchParams(props.location.search)
const article = search.get("article")