react-router DelayedRedirect

dealyed-redirect.ts

import * as React from 'react'
import { Redirect, RedirectProps } from 'react-router'

interface DelayedProps {
    delay: number
}

interface DelayedState {
    timeToRedirect: boolean
}

class DelayedRedirect extends React.Component<
    RedirectProps & DelayedProps,
    DelayedState
> {
    timeout: any = null

    state: DelayedState = {
        timeToRedirect: false,
    }

    componentDidMount() {
        this.timeout = setTimeout(() => {
            this.setState({
                timeToRedirect: true,
            })
        }, this.props.delay)
    }

    componentWillUnmount() {
        clearTimeout(this.timeout)
    }

    render() {
        const { delay, ...props } = this.props
        const { timeToRedirect } = this.state

        if (timeToRedirect) {
            return <Redirect {...props} />
        }

        return null
    }
}

export default DelayedRedirect

usage.ts

import * as React from 'react'
import { DelayedRedirect } from './delayed-redirect'

const Test = () => (
    <div>
        Redirect to "/" in fem seconds

        <DelayedRedirect to={'/'} delay={5000} />
    </div>
)

export default Test 

See remix-run/react-router#6422 for context