时间戳

首页 > 解决方案 > React Js - 单击ant design stepper时如何更改URL？

javascript - React Js - 单击ant design stepper时如何更改URL？

问题描述

语境：

使用 Ant Design Stepper，我可以单击每个 Step，Stepper 将更新并导航到该步骤以反映这一点。现在我正在尝试添加一个额外的功能，在单击一个步骤时，URL 也会发生变化。这个想法是 URL 的更改将路由到页面上显示的某些组件。我试图通过使用链接将图标包装在每个步骤中来做到这一点。

问题

现在，当我单击 Step 时，URL 会更新，但 Stepper 本身不会更新并导航到 Step 反映了这一点。如果我再次单击相同的步骤，那么步进器将更新并导航到它。我希望无需单击 Step 两次即可完成此操作。

这是代码

<Steps
  size="small"
  current={current}
  onChange={setCurrent}
  type="navigation"
>
  <Steps.Step
    title="People"
    icon={
      <Link to="/workshop/client-portal/stage/file-management/people">
        <Dataset.Icon type="people" />
      </Link>
    }
  />
  <Steps.Step
    title="Positions"
    icon={
      <Link to="/workshop/client-portal/stage/file-management/positions">
        <Dataset.Icon type="positions" />
      </Link>
    }
  />
  <Steps.Step
    title="Links"
    icon={
      <Link to="/workshop/client-portal/stage/file-management/Links">
        <Dataset.Icon type="links" />
      </Link>
    }
  />
  <Steps.Step
    title="Lookups"
    icon={
      <Link to="/workshop/client-portal/stage/file-management/lookups">
        <Dataset.Icon type="lookups" />
      </Link>
    }
  />

任何想法或见解将不胜感激。

感谢您的时间。

标签： javascriptreactjsreact-routerantd

解决方案

在我看来，您的问题是由于您仅用链接包装图标 - 因此单击标签不会触发路线更改。所以基本上你可以使用这个模式来链接整个步骤：

<Steps.Step
    title={
      <Link to="/workshop/client-portal/stage/file-management/people">
        People
      </Link>
    }
    icon={
      <Link to="/workshop/client-portal/stage/file-management/people">
        <Dataset.Icon type="people" />
      </Link>
    }
  />

我根据您提供的代码创建了这个简化的沙箱，以演示它是如何工作的。

您可以做的另一件事是使用react-router'shistory.push()方法来推送到您喜欢的链接Steps onChange：

<Steps
  size="small"
  current={current}
  onChange={(id)=>{
     setCurrent(id);
     history.push(
     /* the path you want to push to based on the route id */
    )
   }}
  type="navigation"
>

如果您选择第二种解决方案，您甚至不需要使用Links.

推荐阅读