Back Button代码优化：寻求输出一致的更优替代实现方案

先指出原代码里的一个隐性bug：stepRoutes中/appointmenst/add-details存在拼写错误，应该修正为/appointments/add-details，否则会导致第四步返回时路由跳转失败。

下面是输出效果完全一致的优化版本，同时提升了代码的可读性、语义化和无障碍性：

import { useCallback } from 'react';
import { IoArrowBackOutline } from 'react-icons/io5';
import Localize from './Localize';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';

// 修正拼写错误，改用数字作为键，避免类型转换
const stepRoutes: Record<number, string> = {
  1: '/appointments/choose-specialty',
  2: '/appointments/select-doctor',
  3: '/appointments/time-slot',
  4: '/appointments/add-details',
  5: '/appointments/payment',
};

const BackButton = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const previousStep = useSelector(state => state.yourState.previousStep);
  const setCurrentStep = (step: number) => ({ type: 'SET_CURRENT_STEP', payload: step });

  const handleGoBack = useCallback(() => {
    // 提前return，减少if-else嵌套
    if (previousStep === 0) {
      openToast('warning', 'You are going back to dashboard');
      navigate('/dashboard');
      return;
    }

    dispatch(setCurrentStep(previousStep));
    navigate(stepRoutes[previousStep]);
  }, [dispatch, navigate, previousStep]);

  // 用button替代div，符合语义化和无障碍标准
  return (
    <button className={styles.backButton} onClick={handleGoBack} type="button">
      <IoArrowBackOutline className={styles.backIcon} />
      <Localize>Back</Localize>
    </button>
  );
};

export default BackButton;

优化点说明： #

• 语义化与无障碍优化：用<button>替代<div>作为交互容器。原生button自带键盘触发（Enter/空格）、焦点管理、屏幕阅读器识别等特性，无需额外代码就能满足无障碍要求，比div更适合做点击交互元素。
• 简化路由对象访问：将stepRoutes的键改为数字类型，避免每次访问时的toString()转换，代码更简洁高效。
• 扁平化逻辑结构：通过提前return去掉else分支，减少代码嵌套，提升可读性和维护性。
• 修复拼写错误：修正了路由地址的拼写问题，避免潜在的跳转失败bug。

内容的提问来源于stack exchange，提问作者aaaali