javascript - 在 React 中，如何在 n 秒后以编程方式滑动(使用转换)到另一条路线？

Question

我正在尝试构建一个移动优先的网络应用程序，它需要我显示启动页面几秒钟，然后使用幻灯片效果自动转换到登录页面。这应该只发生在初始页面上。

我不想在登录页面本身上创建覆盖层，因为我希望能够在启动页面上执行一些操作，我希望这些操作独立于其他页面。

我想做的另一件事是防止用户在尝试手动导航到启动页面时再次看到启动页面，但我认为我可以使用身份验证 HOC 来处理该问题，但目前路由转换效果更重要。

我一直在研究 React CSS 转换，但我很困惑，没有找到任何可以满足我的目的的东西。

这是我的代码:

app.js

import React from 'react';
import {
  Route,
  Switch
} from 'react-router-dom';
import { ConnectedRouter } from 'connected-react-router'

import Home from './homeComponent';
import Login from './loginComponent';

const App = ({ history }) => {
  return (
    <ConnectedRouter history={history}>
        <Switch>
          <Route exact={true} path="/" component={Home} />
          <Route path="/login" component={Login} />
        </Switch>
    </ConnectedRouter>
  );
};

export default App;

homeComponent.js

import React, { Component } from 'react';

class HomeComponent extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-md-12"><h1>Home</h1></div>
        </div>
      </div>
    );
  }
}

export default HomeComponent;

登录组件.js

import React, { Component } from 'react';

class LoginComponent extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-md-12"><h1>Login</h1></div>
        </div>
      </div>
    );
  }
}

export default LoginComponent;

正确的方法是什么？

Answer 1

您可以在启动屏幕的 componentDidMount 生命周期 Hook 上设置超时，以更改登录页面的路由

import React, { Component } from 'react';

class HomeComponent extends Component {

  componentDidMount() {
    setTimeout(() => {
      this.props.history.push('/login')

      /* here you could run a function passed by the main container in the props
         where you can change the state of the parent component to mark the splash
         screen as showed, and redirect directly to the login page or the page after 
         that if already logged */

    }, 5000 /* or the time you want in miliseconds */)
  }

  render() {
    return (
      <div>
        <div className="row">
          <div className="col-md-12"><h1>Home</h1></div>
        </div>
      </div>
    );
  }
}

export default HomeComponent;

this.props.history.push('/login') 是react-router提供的 Action 创建者。

希望有帮助。