reactjs - Material UI Stepper 使用状态和链接功能

Question

我一直在使用 Material UI 步进器作为我的 React 项目中不同页面之间的导航。页面应根据步进器上的当前 useState 更改，但是，它似乎默认返回主页。

function getSteps() {
  return ['page1', 'page2', 'page3', 'page4'];
}

  function getStepContent(step: number) {
    switch (step) {
      case 0:
        return "/page1"
      case 1:
        return "/page2"
      case 2:
        return "/page3"
      case 3:
        return "/page4"
      default:
        return "/page1"
    }
}

already linked to router

export default function HorizontalNonLinearStepper() {
  const classes = useStyles();
  const [activeStep, setActiveStep] = useState(0);
  const [url, setUrl] = useState('')
  const steps = getSteps();

  const handleStep = (step: number) => () => {
    setActiveStep(step);
    const currentUrl = getStepContent(step)
    setUrl(currentUrl)
    console.log(step)
    console.log(currentUrl)
  };
 
  return (
    <div className={classes.root}>
    {/*getStepContent(activeStep)*/}
      <Stepper nonLinear activeStep={activeStep} className={classes.stepper}>
        {steps.map((label, index) =>  (
          <Step key={label}>
           <StepButton onClick={handleStep(index)}>
             <Link to = {url}>
            <StepLabel 
              classes={{ label: classes.label, active: classes.labelActive}}
              StepIconProps={{
                classes: { root: classes.icon, text: classes.iconText, active: classes.iconActive},
                }}>
              {label}
              </StepLabel>
              </Link>
            </StepButton>
          </Step> 
        ))}
      </Stepper>
    </div>
  );
}

编辑部分解决方案 现在这会根据步进器使用状态（步骤）链接步进器组件上的不同页面。但是，现在有两个问题。

1. 用户必须先单击步进器编号来更改使用状态，然后才能单击文本更改页面。

2. 当新页面加载时，步进器使用状态默认回到下面常量中设置的useState

const [activeStep, setActiveStep] = useState(0);

标签： reactjsmaterial-uiuistepper