为什么不使用react-router提供的<Redirect/>组件呢？我认为这更清楚，更符合React的声明性模型，而不是将逻辑隐藏在命令式thunk/action中。

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

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

  componentWillUnmount() {
    clearTimeout(this.id)
  }

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

state = {
    redirect: false // add a redirect flag
};

componentDidMount() {
    // only change the redirect flag after 5 seconds if user is not logged in
    if (!auth) {
        this.timeout = setTimeout(() => this.setState({ redirect: true }), 5000);
    }
}

componentWillUnmount() {
    // clear the timeer just in case
    clearTimeout(this.timeout);
}

render() {
    // this is the key:
    // 1. when this is first invoked, redirect flag isn't set to true until 5 seconds later
    // 2. so it will step into the first else block
    // 3. display content based on auth status, NOT based on redirect flag
    // 4. 5 seconds later, redirect flag is set to true, this is invoked again
    // 5. this time, it will get into the redirect block to go to the sign in page
    if (this.state.redirect) {
        return <Redirect to="/signin" />;
    } else {
        if (!auth) {
            return (
                <div className="center">
                    <h5>You need to login first to register a course</h5>
                </div>
            );
        } else {
            return <div>Registration Page</div>;
        }
    }
}

如果您已经在使用redux形式转换，并且它包含在您的项目中，则可以按如下所示创建操作。

export const redirectToProfile = history => {
  return (dispatch, setState) => {
    history.push('/');
  }
};

// shorter like this.
export const redirectToProfile = history => () => {
  history.push('/');
}

// and even shorter...
export const redirectToProfile = history => () => history.push('/');

备选项：

如果调整Search组件的默认导出，也可以直接在组件中调用history.push('/');。这是首选方法，因为您不必创建额外的操作并通过redux调度它。
将导出更改为...

export default withRouter(connect(mapStateToProps)(Search));

然后在您的组件中按如下方式使用它...

componentDidMount() {
  setTimeout(this.props.history.push('/'), 3000);
}

//This is an example with functional commponent.

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

function Splash() {
    let navigate = useNavigate();
    const [time, setTime] = useState(false);
    useEffect(() => {
        setTimeout(() => {
            setTime(true)
        }, 2000)  
        setTime(false);
    }, []);
    return time ? navigate('/dashboard') : navigate('/account');
}
export default Splash;