如何在React按钮onClick事件中通过props实现动态跳转外部页面？

你之前的写法onClick={event => window.location.href='{props.url'}无效，问题出在字符串模板语法错误——用单引号包裹时，里面的{props.url}不会被解析成变量，反而会被当成字符串的一部分。

下面是两种正确实现方式：

方式一：直接赋值变量（最简洁） #

window.location.href可以直接接收字符串变量，不需要额外引号包裹，直接传入props传递的url即可：

onClick={() => window.location.href = props.url}

如果不需要用到event参数，可以直接省略，简化代码。

方式二：使用模板字符串（适合需要拼接额外内容的场景） #

如果后续需要在url后拼接参数等内容，用ES6模板字符串更灵活，注意用反引号包裹整个字符串，变量用${}包裹：

onClick={() => window.location.href = `${props.url}`}

额外注意事项 #

• 确保props.url传递的是完整的外部URL（需包含https://或http://前缀），否则会被识别为当前域名下的相对路径，无法跳转到外部网站。
• 如果需要在跳转前执行额外逻辑（比如阻止默认行为、埋点统计），可以保留event参数：

onClick={(event) => {
  event.preventDefault(); // 若按钮是<a>标签，需阻止默认跳转行为
  // 这里添加额外逻辑
  window.location.href = props.url;
}}

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