Question

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

我该怎么做？

我在两个单独的组件中都拥有介绍屏幕和主页，并且我正在使用React Router。

我一直在考虑使用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;

能否请您就正确的方法给我建议？

Answer 1

您的简介组件可以是这样

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>
  }
}

Answer 2

请参考以下问题： Programmatically navigate using react router

基本上，您将从道具中获取历史记录，并将其用于推送新路线。

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

如果因为它不是Route中的组件而不在道具中看到它，则需要使用“ react-router-dom”中的withRouter。

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

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

2 个答案: