javascript react router链接到相同的URL但发送不同的状态

juud5qan  于 2023-05-27  发布在  Java
关注(0)|答案(2)|浏览(90)

我需要一些帮助,如何打开相同的网址与react-routerLink,但发送不同的状态。

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

例如,我有2个链接到"/ecgo-5",但我需要为每个链接发送不同的状态。当我已经在"/ecgo-5"路径上,然后单击另一个链接发送不同的状态时,页面不会刷新新的状态。
知道怎么做吗

yqkkidmi

yqkkidmi1#

如果有两个单独的链路传递 * 不同的 * 路由状态,或者有条件地传递 * 不同的 * 路由状态的单个链路,那么接收状态的路由组件应该在组件的生命周期内处理location.state更新,例如:当它被安装时。使用useEffect钩子来“监听”和处理location.state值的任何更改。
示例:

<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]);

  ...
};
ruyhziif

ruyhziif2#

您可以根据您提到的条件动态修改Link组件的to prop。但是,状态对象应该作为一个prop直接提供给Link组件,而不是作为to prop的一部分。下面是一个例子:

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

// ...

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

在本例中,to属性是由路径名和状态属性组成的对象。路径名是根据条件确定的,状态对象包含要传递给目标URL的所需状态。
当你点击链接时,React Router将处理导航并更新URL,而不会导致整个页面刷新。为目标URL呈现的新组件可以使用location.state属性访问状态。
确保你已经在React Router设置中设置了必要的路由配置,以处理/ecgo-3和/ecgo-5 URL,并使用目标组件中的location.state对象检索状态。

相关问题