React+TypeScript中如何拼接字符串与变量设置HTML元素href属性

你用模板字符串拼接的写法本身是正确的，不生效大概率是细节问题导致的，先给你确认标准写法，再排查可能的问题：

标准正确写法 #

import React from 'react';

// 示例组件，接收userId作为props
const UserProfileLink = ({ userId }: { userId: string | number }) => {
  // 用模板字符串拼接固定路径和变量
  return <a href={`/user/${userId}`}>查看用户详情</a>;
};

export default UserProfileLink;

常见不生效原因及解决方法 #

• 变量无有效值：检查userId是否正确赋值，比如是否从props、state或接口返回值中拿到了真实数据，避免出现/user/undefined或空路径的情况。可以加兜底处理：

  href={`/user/${userId ?? 'unknown'}`}
  

• TypeScript类型问题：如果userId可能为null或undefined，需要先处理类型：

  • 非空断言（仅当你100%确定变量有值时使用）：

    href={`/user/${userId!}`}
    

  • 条件渲染（避免渲染无效链接）：

    {userId && <a href={`/user/${userId}`}>查看用户详情</a>}
    

• 语法细节错误：确认模板字符串用的是英文反引号（），不是中文全角的「」；同时不要把模板字符串误写成单引号包裹的普通字符串（比如href='/user${userId}'这种错误写法）。

• 路由配置问题：如果项目用了React Router，要确保路由规则中定义了/user/:userId的路由，否则跳转后会出现404，看起来像是href不生效。

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