我需要一些帮助,如何打开相同的网址与react-router
Link
,但发送不同的状态。
<Link
to={items.vehicleModelId === 2
? '/ecgo-3'
: items.vehicleModelId === 3 && '/ecgo-5'
}
state={{ id: items.id }}
>
{items.name}
</Link>
例如,我有2个链接到"/ecgo-5"
,但我需要为每个链接发送不同的状态。当我已经在"/ecgo-5"
路径上,然后单击另一个链接发送不同的状态时,页面不会刷新新的状态。
知道怎么做吗
2条答案
按热度按时间yqkkidmi1#
如果有两个单独的链路传递 * 不同的 * 路由状态,或者有条件地传递 * 不同的 * 路由状态的单个链路,那么接收状态的路由组件应该在组件的生命周期内处理
location.state
更新,例如:当它被安装时。使用useEffect
钩子来“监听”和处理location.state
值的任何更改。示例:
ruyhziif2#
您可以根据您提到的条件动态修改Link组件的to prop。但是,状态对象应该作为一个prop直接提供给Link组件,而不是作为to prop的一部分。下面是一个例子:
在本例中,to属性是由路径名和状态属性组成的对象。路径名是根据条件确定的,状态对象包含要传递给目标URL的所需状态。
当你点击链接时,React Router将处理导航并更新URL,而不会导致整个页面刷新。为目标URL呈现的新组件可以使用location.state属性访问状态。
确保你已经在React Router设置中设置了必要的路由配置,以处理/ecgo-3和/ecgo-5 URL,并使用目标组件中的location.state对象检索状态。