javascript window.location 不适用于使用反应路由器 4 的反应应用程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46672544/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
window.location does not work with react app using react router 4
提问by arcseldon
Have the following "app", and window.locationis not configurable. I would ideally like to hit the submit button and go to an alternate domain.This is actually part of a larger app, in which I use an external Identity Provider for Signin. Snippet below is a fully working sample to illustrate the issue:
具有以下“应用程序”，并且window.location不可配置。理想情况下，我想点击提交按钮并转到备用域。这实际上是更大应用程序的一部分，我在其中使用外部身份提供程序进行登录。下面的代码段是一个完整的工作示例来说明这个问题：
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import Router from './routes';
import reducers from './reducers';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
const store = createStore(reducers);
class Signin extends React.Component {
onSubmit() {
var result = Object.getOwnPropertyDescriptor(window, 'location');
window.location = 'http://www.bbc.co.uk';
}
render() {
return (
<div>
<form
className="form-horizontal col-xs-10 col-xs-offset-1"
onSubmit={this.onSubmit.bind(this)}
>
<div className="form-group">
<span className="col-xs-3" />
<div className="col-sm-6">
<button type="submit" className="btn btn-success btn-sm">
Submit
</button>
</div>
</div>
</form>
<script />
</div>
);
}
}
class App extends React.Component {
render() {
return (
<div>
<div className="container">{this.props.children}</div>
</div>
);
}
}
render(
<Provider store={store}>
<BrowserRouter>
<App>
<Switch>
<Route exact path="/" component={Signin} />
</Switch>
</App>
</BrowserRouter>
</Provider>,
document.getElementById('root')
);
You can see a working sample here
On my real "app", am using the following dependencies and versions:
在我真正的“应用程序”上，我使用以下依赖项和版本：
"prop-types": "^15.6.0"
"react": "^15.6.1"
"react-dom": "^15.6.1"
"react-redux": "4.3.0"
"react-router-dom": "^4.0.0"
"react-scripts": "1.0.13"
You will notice I put in a line:
你会注意到我写了一行：
var result = Object.getOwnPropertyDescriptor(window, 'location');
This returns information about the locationobject and indicates configurable=false. The URL currently remains the same with a /?taggged on the end.
这将返回有关location对象的信息并指示configurable=false。URL 当前保持不变，/?但在末尾带有标记。
Can anyone offer any insights? Tried also window.location.href. It seems that perhaps react / react router is reconfiguring window.location to be un-configurable - is there any reason or workaround anyone can offer.
任何人都可以提供任何见解吗？也试过了window.location.href。似乎反应/反应路由器正在将 window.location 重新配置为不可配置 - 是否有任何人可以提供的任何理由或解决方法。
回答by arcseldon
OK, I wasn't suppressing the form submission.
好的，我没有禁止表单提交。
onSubmit(e) {
e.preventDefault();
window.location = "https://www.bbc.co.uk";
}
Yes, that one again...
是的，又是那个……
