为何三元运算符出现反向效果？嵌套实现多分支遇困惑

首先看你当前的代码，逻辑反转的原因很明确：你写的条件是product !== 'model 3'，这意味着当产品不是model 3时，跳转到/design/model3；是model 3时反而跳/design/model，完全和预期逻辑相反。

修正单分支逻辑 #

把判断条件改成全等匹配即可：

function BottomNav({product}) {
  return (
    <div className="bottomNav">
      <Link to={product === 'model 3' ? '/design/model3' : '/design/model'}>
        <button className="leftbutton">Custom design</button>
      </Link>
    </div>
  )
}

实现多分支（类似switch效果） #

如果需要支持更多产品型号，不推荐嵌套多层三元（可读性差），更推荐用对象映射的方式，比嵌套三元清晰得多：

方式1：对象映射（推荐）

function BottomNav({product}) {
  // 定义产品与路由的映射关系
  const productRoutes = {
    'model 3': '/design/model3',
    'model Y': '/design/modely',
    'model S': '/design/models',
    // 默认路由（匹配不到时使用）
    default: '/design/model'
  }

  // 从映射中获取对应路由，没有则用默认值
  const targetRoute = productRoutes[product] || productRoutes.default

  return (
    <div className="bottomNav">
      <Link to={targetRoute}>
        <button className="leftbutton">Custom design</button>
      </Link>
    </div>
  )
}

方式2：嵌套三元（仅适合少量分支）

如果一定要用嵌套三元，注意逻辑顺序，避免混乱：

function BottomNav({product}) {
  return (
    <div className="bottomNav">
      <Link to={
        product === 'model 3' ? '/design/model3' :
        product === 'model Y' ? '/design/modely' :
        product === 'model S' ? '/design/models' :
        '/design/model' // 默认路由
      }>
        <button className="leftbutton">Custom design</button>
      </Link>
    </div>
  )
}

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