Proposal: Delayed Redirect

[GGAlanSmithee]

Delayed Redirect

Use Case

Display a page for n seconds, then redirect to another page.

Possible current solutions

class DelayedRedirect extends React.Component {
    state = {
        redirect: false,
    }

    componentDidMount() {
        setTimeout(() => {
            this.setState({
                redirect: true,
            })
        }, 2000)
    }

    render() {
        if (this.state.redirect) {
            return (
                <Redirect to={'/'} />
            )
        }

        return (
            <div>
                Redirecting to "/" in two seconds
            </div>
        )
    }
}

or

class DelayedRedirect extends React.Component {
    componentDidMount() {
        setTimeout(() => {
            history.push('/')
        }, 2000)
    }

    render() {
        return (
            <div>
                Redirecting to "/" in two seconds
            </div>
        )
    }
}

The above examples require you to use a proper (non-funcitonal) component and are either verbose or imperative (both which seems to go against the latest iterations of ´react-router´).

Propsed Solution / Interface

const DelayedRedirect = () => (
    <div>
        Redirecting to "/" in two seconds

        <Redirect to={'/'} delay={2000} />
    </div>
)

Disclosure

I have no idea of the inner workings of react-router and how feasible this would be or not.

[GGAlanSmithee]

Reference Implementation

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

import * as React from 'react'
import { DelayedRedirect } from 'react-router-dom'

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

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

export default Test 

[GGAlanSmithee]

Created a gist

[timdorr]

Thanks, but I don't think this is going to be something we'll build into the library. There are a number of ways you might want to build it, so it's best left up to the user to determine how they want to implement it.