react routing not working as expected

Question

I have my roots defined like following:

<Route path="/" onEnter={this.verifyLang}>
  <Route path="/:lang" onEnter={this.verifyLang}>

    <IndexRoute component={this.getIndexRoute()} />
    <Route path="auth">
      <Route path="confirm-password" component={this.getIndexRoute()} />
      <Route path="confirm-code/code=:code&email=:email" component={this.getIndexRoute()}  />
      <Route path="confirm_email" component={this.getIndexRoute()}  />
    </Route>
    <Route path="landing" component={Landing} />
    <Route path="impress" component={Impress} />

  </Route>
</Route>

The function this.getIndexRoute() gives me Launch component. Now inside Launch component I have a method:

componentWillReceiveProps(nextProps){

    browserHistory.push('landing');
}

I am expecting to redirect to Landing component but nothing happens. Why it is so?

What version of router? Is that the react-router `browserHistory` you're referencing? — Dave Newton, May 04 '17 at 16:19
http://stackoverflow.com/a/31079244/438992 so if all else is well I'm not sure what the issue would be. — Dave Newton, May 04 '17 at 16:21
From the official documentation, `componentWillReceiveProps` is invoked when the `props` will be updated, not when the component is being initialized. Maybe you want to put it in `componentWillMount()`? — Joy, May 04 '17 at 16:21

Julio Betta · Answer 1 · 2017-05-04T17:00:13.087

Instead of...

<IndexRoute component={this.getIndexRoute()} />

I would use...

<IndexRedirect to='landing' />

Refactoring your code:

<Route path="/" onEnter={this.verifyLang}>

  <Route path=":lang" onEnter={this.verifyLang}>

    <IndexRedirect to='landing' />

    <Route path="auth">
      <Route path="confirm-password" component={this.getIndexRoute()} />
      <Route path="confirm-code/code=:code&email=:email" component={this.getIndexRoute()}  />
      <Route path="confirm_email" component={this.getIndexRoute()}  />
    </Route>

    <Route path="landing" component={Landing} />
    <Route path="impress" component={Impress} />
  </Route>
</Route>

react routing not working as expected

1 Answers1