Реагировать на приватные маршруты роутера / редирект не работает с приставкой

Question

Я пытаюсь настроить защищенные маршруты, где пользователь перенаправляется на страницу / login, если они не вошли в систему, но это не работает при использовании redux.

Это мой компонент ProtectedRoute:

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Route, Redirect } from 'react-router-dom';

import { authenticate } from './actions';

const ProtectedRoute = ({
  component: Component, authenticate, isAuthenticated, ...rest
}) => {
  useEffect(() => {
    authenticate();
  });

  return (
    <Route
      {...rest}
      render={props => (isAuthenticated ? (
        <Component {...props} />
      ) : (
        <Redirect to="/login" />
      ))
      }
    />
  );
};

ProtectedRoute.propTypes = {
  component: PropTypes.elementType.isRequired,
  authenticate: PropTypes.func.isRequired,
  isAuthenticated: PropTypes.bool.isRequired,
};

const mapStateToProps = state => ({
  isAuthenticated: state.isAuthenticated,
});

const mapDispatchToProps = {
  authenticate,
};

export default connect(mapStateToProps, mapDispatchToProps)(ProtectedRoute);

А вот и маршруты:

<Provider store={store}>
  <Router>
    <Switch>
      <ProtectedRoute exact path="/" component={App} />
      <Route path="/login" component={LoginPage} />
    </Switch>
  </Router>
</Provider>

Теперь, прежде чем вы отметите это как дубликат, я пробовал решения в других темах.

Использование withRouter не работает.

withRouter(connect(mapStateToProps, mapDispatchToProps)(ProtectedRoute))

То же самое с {pure: false}

connect(mapStateToProps, mapDispatchToProps, null, {pure: false})(ProtectedRoute);

Я также использую Switch. Я не уверен, как заставить это работать.

Answer 1

Почему вы не используете компонент HOC для проверки подлинности?

import React, { Component } from 'react';
import { connect } from 'react-redux';

export default ChildComponent => {
  class ComposedComponent extends Component {

    componentDidMount() {
      this.shouldNavigateAway();
    }

    componentDidUpdate() {
      this.shouldNavigateAway();
    }
    shouldNavigateAway() {
      if (!this.props.auth) {
        this.props.history.push('/');
      }
    }
    render() {
      return <ChildComponent {...this.props} />;
    }
  }
  function mapStateToProps(state) {
    return { auth: state.auth.authenticated };
  }
  return connect(mapStateToProps)(ComposedComponent);
};

Теперь вам нужно только импортировать этот компонент в защищенный компонент и экспортировать защищенный компонент, как показано ниже,

import authCheck from 'blah/blah...'

export default authCheck(ProtectedComponent)