window.location does not work with react app using react router 4

Question

Have the following "app", and window.location is 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:

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 location object and indicates configurable=false. The URL currently remains the same with a /? taggged on the end.

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.

arcseldon · Accepted Answer · 2017-10-10 17:39:06Z

9

OK, I wasn't suppressing the form submission.

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

Yes, that one again...

answered Oct 10, 2017 at 17:39

arcseldon

37.4k17 gold badges126 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

window.location does not work with react app using react router 4

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related