document.location 在 ReactJS 生产构建中不起作用答案

【问题标题】：document.location isn't working in ReactJS Production Builddocument.location 在 ReactJS 生产构建中不起作用
【发布时间】：2021-12-18 13:21:45
【问题描述】：

我正在使用 document.location 方法在点击时进行重定向：

selectMission(){
document.location="/dnd?mission="+this.state.missionName
;}


<button onClick={this.selectMission}>
   Select Mission
</button>

在开发版本下一切正常，但当我尝试生产版本时，它不再工作，并且当我使用 document.location 方法时，我在浏览器中收到“未找到”错误。

我还在其他组件上使用了<Link to=''> 方法，它在生产构建下仍然有效。

我认为我不能使用Redirect 方法，因为它不能采用this.state.missionName 和history.push 将不起作用，因为我在基于类的组件中。（我可能错了）。

提前致谢。

【问题讨论】：

正确的方法是使用 document.location.href=[url] 因为 href 是设置 URL 的属性，而 location 本身是一个对象并包含一些其他配置，请检查：stackoverflow.com/questions/2652816/…

标签： reactjs redirect routes

【解决方案1】：

我找到了我的问题的答案，我就把它放在这里，以防有人遇到同样的问题。

我刚刚设法在我的类组件中使用了history.push 方法。见以下代码：

import { withRouter } from 'react-router-dom';

constructor(props) {
super(props);
this.selectMission = this.selectMission.bind(this);

selectMission=()=> {
let url = "/dnd?mission="+this.state.missionName;
this.props.history.push(url);}

<button onClick={this.selectMission}>
   Select Mission
</button>

export default withRouter(yourComponentName);

我刚刚在生产版本中进行了测试，效果很好。希望有一天它可以帮助某人:)

【讨论】：