React Router v4 redirect decorator
React Router switched to component based routing starting with the version 4. Redirects are now done by rendering a
Redirect component, like this: (Please note that you can use included withRouter decorator but it can cause update blocking and introduce side effects. This is small subset of it.)
What I usually do is to keep
redirectTo property in component's state. To redirect, I set it to the URL I want to redirect to, and render
Redirect at the start of the
This approach works well, but I got tired of repeating the same code over and over again. So I pulled the functionality to a decorator (higher order component if you prefer).
I did exactly what I described above, and exposed
redirectTo method to a composed component.
; ; ; ;
Import newly added decorator and apply it to your component. It will inject
redirectTo to it's props, and you can use it anywhere to redirect user to a new URL.
First parameter is obviously a URL, and the second one is boolean
push. It is
false by default and in that case redirect URL will replace the current URL (user won't be able to get back to it by clicking browser back button). When set to
true it will push new URL to the history, leaving the old one as well.