React NavLink添加三元运算符报错：页面未找到的解决方法

你的问题核心是模板字符串使用错误，导致动态路径没被正确解析，反而被当成静态字符串，最终生成了无效URL。

错误原因 #

1. 动态拼接路径必须用**反引号`**包裹字符串，你用了单引号'，导致${}里的表达式完全没被解析，直接变成了路径的一部分。
2. 带JSON.stringify的那行也是同样问题，把代码文本当成了路径，自然会出现编码后的乱码URL。

修复后的代码 #

<li className="nav-item dropdown">
  <NavLink className="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    {auth?.user?.name}
  </NavLink>
  <ul className="dropdown-menu">
    {/* 删掉错误的JSON.stringify路径行，保留正确的动态路径 */}
    <li>
      <NavLink to={`/dashboard/${auth?.user?.role === 1 ? "admin" : "user"}`} className="nav-link">
        Dashboard
      </NavLink>
    </li>
    <li>
      <NavLink to="/login" onClick={handleLogout} className="nav-link">
        Logout
      </NavLink>
    </li>
  </ul>
</li>

额外注意事项 #

• 先确认auth?.user?.role能拿到正确的数值（比如1或其他），可以在组件里加console.log(auth?.user?.role)验证，避免因值为undefined生成/dashboard/undefined这种无效路径。
• 如果auth可能为空，建议加兜底逻辑，比如：

  to={`/dashboard/${auth?.user?.role === 1 ? "admin" : "user"}` || "/dashboard/user"}
  

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