# React Router v4 redirect decorator

DevFeed: [React Router v4 redirect decorator](<https://devfeed.tech/articles/react-router-v4-redirect-decorator-37339.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/react-router-v4-redirect-decorator/>)

Author: Stanko

Published: 2018-01-29T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [React Router](<https://devfeed.tech/topics/react-router.md>), [React Component](<https://devfeed.tech/topics/react-component.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [component](<https://devfeed.tech/tags/component.md>), [export](<https://devfeed.tech/tags/export.md>), [import](<https://devfeed.tech/tags/import.md>), [react](<https://devfeed.tech/tags/react.md>), [react-component](<https://devfeed.tech/tags/react-component.md>), [react-router](<https://devfeed.tech/tags/react-router.md>), [return](<https://devfeed.tech/tags/return.md>), [router](<https://devfeed.tech/tags/router.md>), [routing](<https://devfeed.tech/tags/routing.md>)

## AI overview

This tutorial explains how React Router v4 handles redirects through rendered components and presents a higher-order decorator that exposes a redirectTo method. The decorator can either replace the current URL or push a new history entry.

## Source excerpt

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. <Redirect to='/redirect-url-here' /> 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 render method: render() { const { redirectTo } = this.state; if (redirectTo) { return <Redirect push to={ redirectTo } />; } return ( <YourComponentHere /> ); } 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). Redirect decorator # I did exactly what I described above, and exposed redirectTo method to a composed component. import React, { Component } from 'react'; import { Redirect } from 'react-router-dom'; const withRedirect = ComposedComponent => class RedirectDecorator extends Component { state = { push: false, redirectUrl: null, } componentDidUpdate(prevProps, prevState) { const { redirectUrl, } = this.state; // If component is rendered on redirect page as well // (i.e. header or footer) it would cause redirect-loop // as "<Redirect />" is being rendered every time. // So we are resetting the state after redirect if (!prevState.redirectUrl && redirectUrl) { this.setState({ push: false, redirectUrl: null, }); } } redirectTo = (redirectUrl, push = false) => { this.setState({ push, redirectUrl, }); } render() { const { push, redirectUrl, } = this.state; if (redirectUrl) { return <Redirect push={ push } to={ redirectUrl } />; } return ( <ComposedComponent { ...this.props } redirectTo={ this.redirectTo } /> ); } }; export default withRedirect; Usage # Import newly added decorator and apply it to your component. It will inject redirectTo to it's props, and