Не удается реализовать реакцию перенаправления с помощью загрузчика - PullRequest
0 голосов
/ 26 сентября 2018

У меня проблема с перенаправлением и загрузчиком-спиннером.Поэтому мне нужно перенаправить пользователя на страницу панели мониторинга, если он вошел в систему. На самом деле, я могу реализовать перенаправление, но мне также нужно запустить какой-нибудь загрузчик, потому что перед перенаправлением страница входа в систему видна около 100 мс.Так что было бы неплохо для аутентифицированного пользователя не видеть эту галочку, а какой-нибудь загрузчик.Я также попробовал гораздо больше способов сделать это, но в любом случае у меня возникли некоторые проблемы.Так что я здесь для вашего совета.Может быть, я сделал что-то не так, и, возможно, мой подход неверен.

Это мои маршрутизаторы `

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;

Где я должен использовать редирект и загрузчик?

...