window.location不适用于使用react路由器4的react应用程序



具有以下"应用程序",并且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')
);

你可以在这里看到一个工作样品

在我真正的"应用程序"上,我使用以下依赖项和版本:

"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"

你会注意到我放了一行:

var result = Object.getOwnPropertyDescriptor(window, 'location');

这返回关于location对象的信息并指示configurable=false。URL当前保持不变,末尾带有/?标记。

有人能提供一些见解吗?也尝试过window.location.href。似乎react/rect路由器正在将window.location重新配置为不可配置-有任何理由或解决方法可以提供吗。

好吧,我没有抑制表单提交。

onSubmit(e) {
e.preventDefault();
window.location = "https://www.bbc.co.uk";
}

是的,又是那个。。。

相关内容

  • 没有找到相关文章

最新更新