时间戳

首页 > 解决方案 > 想要在反应中将用户发送到具有特定状态的另一个页面

reactjs - 想要在反应中将用户发送到具有特定状态的另一个页面

问题描述

所以我的主页上有这个按钮，效果很好：

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

它将用户完美地发送到 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

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

我已经尝试了几种方法，但无法使其正常工作。

标签： reactjsbuttonstatereact-router-dom

解决方案

有3个想法如何解决这个问题：

  1. 最简单且用途最少的是“提升状态”，如react docs 中所述。将包含有关显示哪篇文章的信息的状态向上移动到公共父级。

  2. 使用反应上下文（或任何用于共享状态存储的库，如 react-redux）。这是反应上下文文档。您可以设置，在这种共享状态存储中显示哪些文章。

  3. 在 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")

不要忘记用withRouter包裹以确保 props.location 存在或使用useLocation钩子。此外，您可以使用useHistory代替Link重定向，这在这种情况下更方便。

推荐阅读