Redirect in React not wroking

Question

I wonder why, after 5 seconds, it's redirect to a blank white page instead to the page that I want. I already called the function in return, but I guess it's not really working. Can someone help me?

import React from 'react'
import styled from 'react-emotion'
import { Redirect } from 'react-router-dom'

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

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

  renderRedirect = () => {
    if (this.state.redirect === true) {
      return <Redirect to="https://www.google.com/" />
    }
  }

  render() {
    return (
      <ErrorContainer>
        {this.renderRedirect()}
        <ErrorText>Page Not Found</ErrorText>
        <ErrorBox>
          <ErrorDesc>We are sorry, but the page you are looking for does not exist</ErrorDesc>
        </ErrorBox>
      </ErrorContainer>
    )
  }
}
export default ErrorPage

You may find your answer here : https://stackoverflow.com/questions/42914666/react-router-external-link — sagi, Aug 30 '18 at 07:54

score 0 · Accepted Answer · answered Aug 30 '18 at 08:02

If you use a React Router component you must redirect using a route that the router will understand, this means that all the routes must reside within the same app and cannot be external links. If you redirect using an external link, that link will be added to your url like:

http://localhost:1234/https://www.google.com/

And it won't work.

Routes should be relative like '/home' or something like this.

Follow the guidelines in the official docs

Redirecting

If you just want to redirect to an external link you can set a new window location:

window.location = 'https://www.google.com';

Like this:

componentDidMount() {
    setTimeout(() => {
      window.location = 'https://www.google.com';
    }, 5000)
  }

No need to keep the renderRedirect() function or the redirect state

Redirect in React not wroking

1 Answers1