React Router链接到相同的URL但发送不同的状态

huangapple go评论60阅读模式
英文:

React Router Link to the same URL but send different state

问题

我需要一些帮助关于如何使用`react-router``Link`打开相同的URL但发送不同的状态

例如我有2个链接到"/ecgo-5"但我需要为每一个发送不同的状态当我已经在"/ecgo-5"路径上然后点击另一个链接发送不同的状态时页面不会刷新以显示新状态

有什么办法可以实现吗
英文:

I need some help how to open the same url with react-router Link but sending different state.

<Link 
  to={items.vehicleModelId === 2
    ? '/ecgo-3'
    : items.vehicleModelId === 3 && '/ecgo-5'
  }
  state={{ id: items.id }}
>
  {items.name}
</Link>

For example I have 2 links to "/ecgo-5" but I need to send different state for each one of them. When I am already on "/ecgo-5" path and then I click the the another link to send the different state, the page wont refresh with the new state.

Any idea how to do it?

答案1

得分: 0

如果您有两个不同的链接传递不同的路由状态,或者一个单一的链接有条件地传递不同的路由状态,那么接收状态的路由组件应在组件生命周期内处理location.state的更新,例如在挂载时。使用useEffect钩子来"监听"并处理location.state值的任何更改。

示例:

<Link 
  to="/ecgo-5"
  state={{ id: /* 值 A */ }}
>
  {items.name}
</Link>
<Link 
  to="/ecgo-5"
  state={{ id: /* 值 B */ }}
>
  {items.name}
</Link>
const Ecgo5 = () => {
  const { state } = useLocation();
  const { id } = state || {};

  React.useEffect(() => {
    // id 的值已更新,是值 A 还是 B,或者...?
    // ... 逻辑 ...
  }, [id]);

  // ...
};
英文:

If you have two separate links that pass different route state, or a single link that conditionally passes different route states, then the routed component that receives the state should handle location.state updates during the life of the component, e.g. while it is mounted. Use the useEffect hook to "listen" to and handle any changes on the location.state value.

Example:

&lt;Link 
  to=&quot;/ecgo-5&quot;
  state={{ id: /* value A */ }}
&gt;
  {items.name}
&lt;/Link&gt;
&lt;Link 
  to=&quot;/ecgo-5&quot;
  state={{ id: /* value B */ }}
&gt;
  {items.name}
&lt;/Link&gt;
const Ecgo5 = () =&gt; {
  const { state } = useLocation();
  const { id } = state || {};

  React.useEffect(() =&gt; {
    // id value updated, value A or B, or ...?
    // ... logic ...
  }, [id]);

  ...
};

答案2

得分: -1

你可以根据你提到的条件动态修改 Link 组件的 to 属性。但是,状态对象应该直接作为 Link 组件的一个属性提供,而不是作为 to 属性的一部分。这里是一个示例:

import { Link } from 'react-router-dom';

// ...

<Link
  to={{
    pathname: items.vehicleModelId === 2 ? '/ecgo-3' : '/ecgo-5',
    state: { id: items.id }
  }}
>
  {items.name}
</Link>

在这个示例中,to 属性是一个包含 pathname 和 state 属性的对象。pathname 根据条件确定,state 对象包含要传递到目标 URL 的所需状态。

当你点击链接时,React Router 将处理导航并更新 URL,而不会导致完整的页面刷新。用于目标 URL 的新组件可以使用 location.state 属性访问状态。

确保在你的 React Router 设置中设置了必要的路由配置,以处理 /ecgo-3 和 /ecgo-5 的 URL,并在目标组件中使用 location.state 对象检索状态。

英文:

You can modify the to prop of the Link component dynamically based on the condition you mentioned. However, the state object should be provided as a prop directly to the Link component, not as part of the to prop. Here's an example:

import { Link } from &#39;react-router-dom&#39;;

// ...

&lt;Link
  to={{
    pathname: items.vehicleModelId === 2 ? &#39;/ecgo-3&#39; : &#39;/ecgo-5&#39;,
    state: { id: items.id }
  }}
&gt;
  {items.name}
&lt;/Link&gt;

In this example, the to prop is an object that consists of the pathname and state properties. The pathname is determined based on the condition, and the state object contains the desired state to be passed to the target URL.

When you click on the link, React Router will handle the navigation and update the URL without causing a full page refresh. The new component rendered for the target URL can access the state using the location.state property.

Make sure you have set up the necessary route configurations in your React Router setup to handle the /ecgo-3 and /ecgo-5 URLs and retrieve the state using the location.state object in the destination component.

huangapple
  • 本文由 发表于 2023年5月26日 11:18:37
  • 转载请务必保留本文链接:https://go.coder-hub.com/76337445.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定