Перенаправление в React не выполняется - PullRequest
0 голосов
/ 30 августа 2018

Интересно, почему через 5 секунд он перенаправляется на пустую белую страницу, а не на нужную мне страницу. Я уже вызвал функцию взамен, но я думаю, что она на самом деле не работает. Кто-нибудь может мне помочь?

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

1 Ответ

0 голосов
/ 30 августа 2018

Если вы используете компонент React Router, вы должны перенаправить его с использованием маршрута, который будет понятен маршрутизатору, это означает, что все маршруты должны находиться в одном приложении и не могут быть внешними ссылками. Если вы перенаправляете по внешней ссылке, эта ссылка будет добавлена ​​в ваш URL-адрес, например:

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

И это не сработает.

Маршруты должны быть относительными, например '/home' или что-то вроде этого.

Следуйте инструкциям в официальных документах

Перенаправление

Если вы просто хотите перенаправить на внешнюю ссылку, вы можете установить новое расположение окна:

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

Как это:

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

Нет необходимости сохранять функцию renderRedirect() или состояние redirect

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...