如何使用react-router-dom在'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>
}