英文:
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:
<Link
to="/ecgo-5"
state={{ id: /* value A */ }}
>
{items.name}
</Link>
<Link
to="/ecgo-5"
state={{ id: /* value B */ }}
>
{items.name}
</Link>
const Ecgo5 = () => {
const { state } = useLocation();
const { id } = state || {};
React.useEffect(() => {
// 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 'react-router-dom';
// ...
<Link
to={{
pathname: items.vehicleModelId === 2 ? '/ecgo-3' : '/ecgo-5',
state: { id: items.id }
}}
>
{items.name}
</Link>
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论