Question

我对重定向和加载程序旋转有问题。因此，如果登录，我需要将用户重定向到仪表板页面。实际上，我可以实现重定向，但是我还需要运行一些加载程序，因为在重定向之前，登录页面大约100ms可见。因此，对于经过身份验证的用户，最好不要看到该刻度，而是看到一些加载程序。我还尝试了更多方法来执行此操作，但是无论如何，我都遇到了一些问题。所以我在这里为您提供建议。也许我做错了什么，也许我的方法是错误的。

这是我的路由器`

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { connect } from 'react-redux';
import DashboardPage from '../components/pages/DashboardPage';
import LoginPage from '../components/pages/LoginPage';
import NotFoundPage from '../components/pages/NotFoundPage';
import { getUserInfo } from '../actions';

class AppRouter extends Component {
  componentDidMount() {
    const { dispatchUserInfo } = this.props;
    dispatchUserInfo();
  }

  render() {
    return (
      <BrowserRouter>
        <React.Fragment>
          <Switch>
            <Route path="/" component={LoginPage} exact />
            <Route path="/dashboard" component={DashboardPage} />
            <Route component={NotFoundPage} />
          </Switch>
        </React.Fragment>
      </BrowserRouter>
    );
  }
}

AppRouter.defaultProps = {
  dispatchUserInfo: null
};

AppRouter.propTypes = {
  dispatchUserInfo: PropTypes.func
};

const mapDispatchToProps = dispatch => ({
  dispatchUserInfo() {
    dispatch(getUserInfo());
  }
});

export default connect(null, mapDispatchToProps)(AppRouter);

这是我的登录页面`

import React from 'react';
import { NavLink } from 'react-router-dom';

const logo = require('../../../../public/images/event.png');

const config = {
  logo,
  authUrl: ''
};

const LoginPage = () => (
  <div className="container">
    <div className="container__left">
      <header className="login-header">
        <div className="login-header__wrapper">
          <p className="login-header__logo-box">
            <NavLink to="/" role="link"><img src={config.logo} alt="logo" width="190" height="80" className="navbar__logo" /></NavLink>
          </p>
        </div>
      </header>
      <main>
        <section className="register">
          <div className="register-wrapper">
            <section className="register__description">
              <header className="register__header">
                <h2>Events</h2>
                <p>Here you can search your favourite events and get the location on map</p>
              </header>
              <p className="register__info">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    Lorem Ipsum has been the industry standard dummy text ever since the 1500s,
                    when an unknown printer took a galley of type and scrambled it to make
                    a type specimen book.It has survived not only five centuries,
                    but also the leap into electronic typesetting,
                    remaining essentially unchanged. It was popularised
                    in the 1960s with the release of Letraset sheets containing
                    Lorem Ipsum passages, and more recently with desktop publishing
                    software like Aldus PageMaker including versions of Lorem Ipsum.
              </p>
            </section>
          </div>
        </section>
      </main>
      <footer className="main-footer">
        <p className="copyright">
&copy; Events 2018:
          {' '}
          <small>All rights reserved</small>
        </p>
        <p>
Created by
          {' '}
          <a className="author" href="https://www.linkedin.com/in/norayr-ghukasyan-44641a161/">Norayr Ghukasyan</a>
        </p>
      </footer>
    </div>
    <div className="container__right">
      <section className="login">
        <p className="login__text">Sign in with Eventbrite</p>
        <p className="login__button-box">
          <a href="/auth/eventbrite" className="btn btn--login login__button">Sign in</a>
        </p>
      </section>
    </div>
  </div>
);

export default LoginPage;

我应该在哪里使用重定向和加载程序？

无法使用loader-spinner

0 个答案: