React Router v6 Route条件渲染嵌套三元报错的解决方法

你遇到的Do not nest ternary expressions错误是因为ESLint禁止嵌套三元以保证代码可读性，同时React Router v6要求Route的element属性必须接收单个React元素。可以用以下两种更清晰的方式替代嵌套三元：

方法一：使用组件映射对象 #

创建Phase类型与对应组件的映射表，通过类型直接匹配组件，代码简洁易维护：

// 定义Phase类型到组件的映射
const PhaseComponentMap = {
  [PhaseType.intervention]: AssessmentPhaseDetails,
  [PhaseType.observation]: AssessmentPhaseDetails,
  [PhaseType.enrollment]: EnrollmentPhaseDetails,
  [PhaseType.screening]: ScreeningPhaseDetails,
};

// 在Route中使用
<Route
  path="/phases/:phaseIndex"
  element={
    chosenPhase?.type ? (
      <PhaseComponentMap[chosenPhase.type]
        study={study!.item as Study}
        returnPath={pathname}
      />
    ) : null
  }
/>

如果chosenPhase?.type可能不在映射范围内，可以添加默认处理，比如返回null或占位组件。

方法二：提取为单独的判断函数 #

把组件判断逻辑抽成独立函数，用switch替代三元，可读性更强：

// 提取组件判断逻辑
const renderPhaseComponent = () => {
  const commonProps = {
    study: study!.item as Study,
    returnPath: pathname,
  };

  switch (chosenPhase?.type) {
    case PhaseType.intervention:
    case PhaseType.observation:
      return <AssessmentPhaseDetails {...commonProps} />;
    case PhaseType.enrollment:
      return <EnrollmentPhaseDetails {...commonProps} />;
    case PhaseType.screening:
      return <ScreeningPhaseDetails {...commonProps} />;
    default:
      return null; // 无匹配类型时返回null或其他内容
  }
};

// 在Route中使用
<Route
  path="/phases/:phaseIndex"
  element={renderPhaseComponent()}
/>

这两种方式都能避免嵌套三元，符合ESLint规则，同时适配React Router v6的element属性要求，逻辑也和你v5的代码保持一致。

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