reactjs - 如何使用 react-router-dom 在 "Redirect to"秒后返回 'x'

Question

我是 React Js 的初学者。我想在 2 秒后重定向到路径“/event”。

这种方式行不通:

import React from 'react';
import { getFormData } from '../../../helpers/form';
import { eventCreate } from '../../../actions/EventActions';
import { Redirect } from 'react-router-dom';
import { connect } from 'react-redux';

if (event) {
  setTimeout(() => {
    return <Redirect to={'/event'} />;
  }, 2000);
}

但是如果我把它改成:

if (event) {
  return <Redirect to={'/event'} />;
}

它工作得很好。如何在 2 秒后重定向？

Answer 1

2022 更新:在更新版本(React 18、React Router DOM 6)时，我注意到它需要一些重构。

import React, { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'

export default function myComponent () {
  const navigate = useNavigate()

  useEffect(() => {
    setTimeout(() => {
      navigate('/event')
    }, 2000)
  }, [])
  return <div>Content</div>
}

2021 年更新:在深入了解 React 之后，我可能会推荐使用 useEffect 来模拟功能组件中 componentDidMount 的功能。

import React, { useEffect, useHistory } from 'react'

export default function myComponent () {
  const history = useHistory()

  useEffect(() => {
    setTimeout(() => {
      history.push('/event')
    }, 2000)
  }, [])
  return <div>Content</div>
}

上一个答案:您的 if (event) { 是否在某种组件内？我认为您可以通过两种方式之一实现这一目标。要么:

componentDidMount() {
  if (event) {
    setTimeout(() => { 
      this.props.history.push('/event');
    }, 2000)
  }
}

请注意，要使用 componentDidMount 和 this，您必须使用我在您的示例中看不到的类组件。或者:

class RedirectExample extends Component {
  state = {
    redirect: false
  }

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

  componentWillUnmount() {
    clearTimeout(this.id)
  }

  render() {
    return this.state.redirect
      ? <Redirect to='/event' />
      : <div>Content</div>
  }
}

根据评论中的要求，我修改了此答案以包含对功能组件的重构。请注意，以下代码未经测试，但应该可以让您了解如何完成它。

import React, { useState } from 'react'
import { Redirect } from 'react-router-dom'

function RedirectExample() {
  const [redirectNow, setRedirectNow] = useState(false)
  if (redirectNow) {
    return <Redirect to='/event' />
  }
  return <div>Content</div>
}

或者可能(我之前没有使用过 useHistory 但从文档中你可以做这样的事情):

import React from 'react'
import { useHistory } from 'react-router'

function RedirectExample() {
  const history = useHistory()

  // setTimeout may cause an error
  setTimeout(() => {
    history.push('/event')
  }, 2000)
  return <div>Content</div>
}