React中无法跳转至外部链接问题求助

核心问题 #

你遇到的情况是因为**<input type="image">是表单的默认提交按钮**，点击它会自动触发表单的提交行为——这会优先于你的window.location.href跳转代码执行，导致页面刷新到当前路由，同时带上点击位置的x/y坐标参数（这是image类型input的默认特性）。另外，React组件里嵌套<body>标签是错误的，会破坏页面DOM结构，必须去掉。

解决方法（任选其一即可） #

方法1：阻止点击事件的默认行为

修改handleClick函数，接收事件参数并调用preventDefault()，阻止表单提交：

function handleClick(e) {
    e.preventDefault(); // 关键：阻止表单默认提交动作
    const location = cookies.get('syllabus');
    console.log(location);
    window.location.href = location;
}

方法2：替换为普通img标签

既然只是需要点击图片跳转，没必要用表单提交按钮，直接换成<img>标签，同时可以删掉多余的<form>标签：

// 替换原input标签
<img id="Course" className="Course" onClick={handleClick} src={syllabus} />

方法3：阻止表单的默认提交行为

如果一定要保留<form>和<input type="image">，给表单添加onSubmit事件阻止默认行为：

<form onSubmit={(e) => e.preventDefault()}>
    <div>
        <input id="Course" className="Course" type="image" onClick={handleClick} src={syllabus}/> 
    </div>
</form>

额外注意 #

务必删除组件里的<body>标签，React组件的渲染内容应该放在根组件的<body>内部，自己嵌套<body>会导致DOM结构异常，引发不必要的问题。

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