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

标签 javascript reactjs react-router react-router-dom

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

你可以看到一个working sample here

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

 "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/react router 正在将 window.location 重新配置为不可配置 - 任何人都可以提供任何理由或解决方法。

最佳答案

好吧,我没有禁止提交表单。

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

是的,又是那个...

关于javascript - window.location 不适用于使用 react 路由器 4 的 react 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46672544/

相关文章:

node.js - 在服务器上处理 react 路由的正确方法?

javascript - isNaN 无法正常工作

javascript - JSON 循环仅产生 1 个结果

javascript - React-router-dom goBack(),如何从另一个js文件继承prop?

javascript - 在 React Router v6 中将 Props 传递给 Outlet

reactjs - react : TypeError: Cannot convert undefined or null to object

javascript - 向 ZingChart 网格添加分页和列排序

javascript - 切换关闭其他打开的 div

node.js - 将 ReactJs 前端 + NodeJs 后端部署到 AWS

reactjs - 我可以将 React.js Web 应用程序部署到共享托管吗?