Ad

RouterContext.push() Reloads Page On Navigation

- 1 answer

Here is my router config:

<Router history={hashHistory}>
        <Route path="/" component={App}>
            <Route path="email" component={EmailPage}>
                <Route path="accountinfo" component={AccountInfo}/>
            </Route>
        </Route>
</Router>

In EmailPage I have this method:

class EmailPage {
  onEmailSubmit() {
    this.context.router.push('/email/accountinfo');
  }
}

The first time i submit, it reloads the whole page wiping out the state of the 'emailPage' component.

Using React router 2.0.0-rc4. Am I doing something wrong?

Update:
I see that the url changes:

http://localhost:8080/#/email/?_k=1w69uj

to 
http://localhost:8080/?#/email/accountinfo?_k=ezdjg6

instead of 
http://localhost:8080/#/email/accountinfo?_k=ezdjg6

Note the missing additional ? before # which seems to be causing the reload

Ad

Answer

I had a similar problem once.. Take this for example..

  getRef(ref) {
    this.placeRef = ref;
  }

  handleSubmit(e) {
    e.preventDefault();
    console.log(e);
    var place = this.placeRef.value;
    this.placeRef.value = '';
    this.context.router.push('/place/'+place);
  }

  render() {
    return (
      <div id="search">
        <form onSubmit={(e) => this.handleSubmit(e)}>
          <div id="input_place">
            <input type="text" className="design" ref={(ref) => this.getRef(ref)} />
          </div>
          <div id="place_search">
            <button type='submit' className="design">Search</button>
          </div>
        </form>
      </div>
    );
  }

In handleSubmit() function if you remove e.preventDefault() then a full page reload will happen. So i guess that might be a solution for your problem.

Ad
source: stackoverflow.com
Ad