useNavigate 不会替换我的动态参数

Question

在我们的项目中，我们使用的是 React-router 版本 4，我们已经迁移到版本 6。

但是，自从 useLocation API 更改为 useNavigate 以来，我们遇到了一个我无法识别的问题。

这是我的功能：

import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';

import { IProps, IPropsReturn } from './types';

export const useSteppers = ({ steppers, redirectPath }: IProps): IPropsReturn => {
  const { customerOuid, routeFeature, routeTab, step } = useParams();
  const navigate = useNavigate();
  const currentStep = step ? parseInt(step) : 0;

  useEffect(() => {
    if (!step || currentStep > steppers.length - 1) {
      navigate(`/customer/${customerOuid}/${routeTab}/${routeFeature}/0`);
    }
  }, [step]);

  const handlePrevStep = () => {
    const prevStep = currentStep - 1;

    if (currentStep === 0) {
      return navigate(-1);
    }
    return navigate(`${prevStep}`, { replace: true });
  };

  const handleSubmit = (triggerPolling: () => void) => {
    const nextStep = currentStep + 1;

    if (currentStep === steppers.length - 1 && redirectPath) {
      if (triggerPolling) {
        return triggerPolling();
      }
      return navigate(redirectPath, { replace: true });
    }

    return navigate(`${nextStep}`, { replace: true });
  };

  return {
    currentStep,
    handlePrevStep,
    handleSubmit,
  };
};

问题其实就在这里：

return navigate(`${nextStep}`, { replace: true });

当函数执行时，导航函数返回一条路线：

localhost:3000/#/customer/123/accounting/chargeCancellation/0/1

你看到问题了吗？

0/1

我只想要

/1

在迁移到 v6 之前，我们使用：

    const history = useHistory(); 
    return history.replace(`${nextStep}`);

Answer 1

根据react-router-dom文档here，您可以简单地在所需路径之前添加

../

。它将在路由历史记录中被替换，因此返回将拦截父路由，具体取决于您配置路由的方式。

在你的情况下尝试使用

return navigate(`../${nextStep}`, {replace:true});

希望对你有帮助

Answer 2

您可以简单地使用相对路径导航到同级路线：

navigate(`../${prevStep}`, { replace: true });

您也可以计算绝对路径：

navigate(
  `/customer/${customerOuid}/${routeTab}/${routeFeature}/${prevStep}`,
  { replace: true }
);