React-router: Consider documenting push method added to this.props.

[BlakeTurner]

Components within the Router have a number of props passed down to them, including a function called push, which seems to call pushState to update the browser URL and force a redirect.

Is this the best way to programatically redirect in react-router?

Example use case:

onSubmit() {
  if (this.formIsValid()) 
    this.props.push('/next-page');
}

[10thfloor]

+1

Is there a reason that props inherited from the router are being left out of the documentation?
It seems like essential information.

Would consider contributing to the docs, if given some guidance on this.

[pshrmn]

@BlakeTurner Yes, you should use push and replace for programmatic navigation.

@10thfloor
From the Route.component documentation

The component receives all the properties on context.router.

Which links to here

[timdorr]

Which links to here

And which links to here

[10thfloor]

Cool, I missed that, thanks for the pointers.

Some quick feedback: When teaching students how to use React Router, this question comes up early in the lesson, every time: "How do I do programmatic navigation?".

Consider putting this information front and center in the examples, it's useful!

✌🏻

[cainlevy]

We noticed that the https://reacttraining.com/react-router/examples/auth-workflow example uses a <Redirect /> component. This appears to be the only example of programmatic navigation in v4, and it doesn't use push. Would you mind clarifying whether that was an oversight or if the component pattern really is favored, as shown?

[pshrmn]

@cainlevy http://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router/42121109#42121109

[blairbodnar]

@pshrmn Thanks for the stack overflow link!

I also had a lot of trouble trying to find information on how to programatically navigate with v4 - like @10thfloor mentioned. I didn't think to look on stack overflow - d'oh. I assumed the official docs would have some better info about it!

Thanks!