Реакция: условное отображение компонента в маршруте на основе состояния входа в систему без отображения страницы загрузки.

Question

Я пытаюсь условно визуализировать компонент на основе статуса входа в систему.Я нажимаю на ссылку из отдельного компонента, чтобы отвезти меня домой (маршрут '/').Если вы вошли в систему, я бы хотел, чтобы это привело меня прямо в дом «Вход в систему», а если нет - в дом «Выйти из системы».

Проблема со страницей загрузки заключается в том, чтонеуклюжий.Остальная часть приложения загружается мгновенно.Способность сразу перейти в «дом» в каком-либо приложении без загрузки страницы, кажется, это должно быть легко достижимо?Возможные решения:

• Условное отображение маршрута в некоторой точке вместо компонента под маршрутом
• Отображение последнего обработанного компонента до получения данных вместо страницы загрузки..

РЕДАКТИРОВАТЬ: я хотел бы, чтобы маршрут '/' показывал либо HomeLoggedIn, либо HomeLoggedOut, но не перенаправлял на другой маршрут, чтобы URL-адрес был одинаковым для обоих компонентов.

Текущий код со страницей загрузки ниже.

Спасибо!

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            auth: false
        };
    }
    
    componentDidMount() { // check to see if already signed in.
        firebase.auth.onAuthStateChanged((user) => {
            if (user) {
                this.setState({auth: user});
            } else {
                this.setState({auth: false});
            }
            this.setState({loading: false});
        });
    }
    
    render() {
        console.log(this.state.auth)
        return (
            <Router>
                <OuterContainer>
                    {
                        this.state.loading ?
                            <LoadingPage />
                        :
                            this.state.auth ?
                                <HomeLoggedIn /> :
                                <HomeLoggedOut />
                        
                    }
                    {
                        this.props.showPopupWithParams ?
                        <EditDictionaryPopup
                            dictionary={this.props.showPopupWithParams.dictionary}
                        />
                        : null
                    }
                </OuterContainer>
            </Router>
        )
    }
}

Answer 1

Во-первых, вам нужно управлять состоянием во всем приложении, чтобы хранить, является ли пользователь isLoggedIn или isAuthenticated.Попытка сделать это с помощью управления состоянием на самом верхнем компоненте создаст кошмары, если ваше приложение когда-либо станет немного сложнее.Попробуйте Redux, MobX или React Context API.Я предполагаю, что вы создаете какое-то хранилище с объектом auth, проверяющим, является ли пользователь «isAuthenticated».

При этом вам нужен компонент PrivateRoute.

// PrivateRoute.jsx
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { connect } from 'react-redux'; // if you're using Redux!
import PropTypes from 'prop-types';

const PrivateRoute = ({component: Component, auth, ...rest }) => (
  <Route
    {...rest}
    render = {props => 
      auth.isAuthenticated === true ? (
        <Component {...props} />
      ) : (
        <Redirect to="/loggedOutHome" />
      )
    }
  />
);

PrivateRoute.propTypes = {
  auth: PropTypes.object.isRequired,
}

// this would map your auth object to the components props with Redux
const mapStateToProps = state => ({
  auth: state.auth,
});

export default connect(mapStateToProps)(PrivateRoute);

Затем вы захотите импортировать этот компонент PrivateRoute в свой компонент приложения и использовать его вместе с Switch-router-dom на любом маршруте, который хотите оставить приватным, и добавить некоторую маршрутизацию:

// App.jsx
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import { default as PrivateRoute } from './components/PrivateRoute';
import { Landing } from './components/Landing';
import { LoggedInComponent } from "./components/LoggedInComponent";
import { LoggedOutComponent } from "./components/LoggedOutComponent";

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Route exact path="/" component={Landing} />
          <Route exact path="/loggedOutHome" component = {LoggedOutComponent} />
          <Switch>
            <PrivateRoute exact path="/loggedInHome" component={LoggedInComponent} />
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;

Теперь любая маршрутизация ссылки на ваш LoggedInComponent проверит, проверяет ли пользователь аутентификацию, и примет его там, если это так, или, если нет, перенаправит на ваш LoggedOutComponent.

Надеюсь, это поможет.