React Router Dom v6如何实现跳转至外部独立URL地址？

错误原因 #

你代码中调用的history('url')不符合标准API用法：

• 浏览器原生History API没有直接调用history()传入URL跳转的语法
• 前端框架封装的路由history实例仅支持本站内部路径跳转，无法直接处理外部独立站点地址

修复代码 #

根据你的需求选择对应实现即可：

1. 跳转后可通过后退按钮返回当前表单页 #

使用window.location.href赋值实现：

function validate() {
    if (email==='123@123.com' && password==="123456"){
        console.log(email);
        window.location.href = 'http://www.dummy.com/webmail'
    }
}

2. 跳转后不可通过后退按钮返回当前表单页 #

使用window.location.replace替换当前浏览历史实现：

function validate() {
    if (email==='123@123.com' && password==="123456"){
        console.log(email);
        window.location.replace('http://www.dummy.com/webmail')
    }
}

额外适配说明 #

如果你的按钮是放在<form>标签内部，需要先阻止表单默认提交行为避免跳转被中断：

function validate(e) {
    e.preventDefault()
    if (email==='123@123.com' && password==="123456"){
        window.location.href = 'http://www.dummy.com/webmail'
    }
}

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