Javascript 在ReactJS中，如何在一段时间后从一个屏幕切换到另一个屏幕？

我是ReactJS新手，希望实现以下逻辑：我的应用程序中有一个介绍屏幕，几秒钟后，我需要将介绍屏幕与主页交换

我该怎么做

我在两个独立的组件中有介绍屏幕和主页，我使用的是React路由器

我一直在考虑使用

SetTimeOut

来更改我的组件，但我不知道如何在组件之间使用它

以下是我的App.js代码：

import React, {Component} from 'react';
import './App.css';
import {Route, Switch} from 'react-router-dom';
import Intro from './components/Intro';
import Home from './components/Home';
import Work from './components/Work';
import About from './components/About';
import Carrers from './components/Carrers';
import Contact from './components/Contact';

class App extends Component {
 constructor(){
   super()
 }

 render() {
 return (

   <React.Fragment>
     <Switch>
     <Intro path= "/" exact component={Intro}/>
     <Route path= "/home" exact component={Home} />
     <Route path= "/about" exact component={About} />
     <Route path= "/work" exact component={Work} />
     <Route path= "/carrers" exact component={Carrers} />
     <Route path= "/contact" exact component={Contact} />
     </Switch>
   </React.Fragment>
 );
 }
}


export default App;

import React，{Component}来自'React'；
导入“/App.css”；
从“react router dom”导入{Route，Switch}；
从“./components/Intro”导入简介；
从“./components/Home”导入Home；
从“./组件/工作”导入工作；
从“./components/About”导入关于；
从“./组件/Carrers”导入Carrers；
从“./components/Contact”导入联系人；
类应用程序扩展组件{
构造函数（）{
超级（）
}
render（）{
返回(
);
}
}
导出默认应用程序；

---

你能告诉我正确的方法吗？

你的简介部分可以是这样的

class Intro extends React.Component {


componentDidMount() {
    setTimeout(() => {
      this.props.history.push('/home')
    }, 5000) // render for 5 seconds and then push to home 
  }
  render() {
    return <h1>render for 5 seconds and then push to home</h1>
  }
}

类介绍扩展了React.Component{
componentDidMount（）{
设置超时（（）=>{
this.props.history.push（“/home”）
}，5000）//渲染5秒，然后推到主页
}
render（）{
返回“渲染”5秒，然后按“主视图”
}
}

您的简介组件可以是这样的

class Intro extends React.Component {


componentDidMount() {
    setTimeout(() => {
      this.props.history.push('/home')
    }, 5000) // render for 5 seconds and then push to home 
  }
  render() {
    return <h1>render for 5 seconds and then push to home</h1>
  }
}

类介绍扩展了React.Component{
componentDidMount（）{
设置超时（（）=>{
this.props.history.push（“/home”）
}，5000）//渲染5秒，然后推到主页
}
render（）{
返回“渲染”5秒，然后按“主视图”
}
}

请参考此问题：

基本上，你们会从道具中获得历史，并用它来推动新的路线

const { history } = this.props;
history.push('/new-location')

如果您没有在道具中看到它，因为它不是路由中的组件，那么您需要使用“react router dom”中的With router

import { withRouter } from 'react-router-dom';
export default withRouter(Component);

---

请参阅以下问题：

基本上，你们会从道具中获得历史，并用它来推动新的路线

const { history } = this.props;
history.push('/new-location')

如果您没有在道具中看到它，因为它不是路由中的组件，那么您需要使用“react router dom”中的With router

import { withRouter } from 'react-router-dom';
export default withRouter(Component);