React Router для неаутентифицированного пользователя

Не могли бы вы попробовать это?

<Switch>
    <Route exact path = "/" component = {Login} />
    <Route exact path = "/register" component = {Register} />
    {
        !Auth.isAuthenticated() && <Redirect to = "/" />
    }
    <Route exact path = "/dashboard" component = {Dashboard} />
</Switch>

Есть несколько способов сделать это, но недавно я создал функцию-оболочку для расширения моих защищенных маршрутов.

то есть:

const memberAreaHOC = WrappedComponent => {
  class MA extends Component {
    render() {
      if ( ! Auth.isAuthenticated()) {
        return <Redirect to = "/login" />
      }
      return <WrappedComponent {...this.props}/>;
    }
  }
}

а теперь в определении ваших маршрутов:

<Router>
    <Switch>
        <Route exact path = "/" component = {Login} />
        <Route exact path = "/register" component = {Register} />

        <Route exact path = "/dashboard" component = {memberAreaHOC(Dashboard)} />

    </Switch>
</Router>

Вы видите, я обернул Dashboard нашим новым memberAreaHOC

memberAreaHOC(Dashboard)

Оберните requireAuth в те компоненты, для доступа к которым требуется разрешение. Маршруты

<Route path = "/admindashboard" component = {requireAuth(App)}/>

Создайте компонент более высокого порядка для аутентификации пользователя. Как правило, HOC создается для повторного использования функциональных возможностей, где он принимает функцию в качестве входных данных и выдает выходные данные в качестве функции. Таким образом, чтобы аутентифицировать пользователя для каждого маршрута и для всех его аутентифицированных обновлений или Поскольку componentWillMount проверит свою аутентификацию перед рендерингом обернутого компонента, componentWillUpdate будет проверять аутентификацию перед обновлением чего-либо в потоке аутентифицированного пользователя.

import React from 'react';
import { connect } from 'react-redux';
import {withRouter} from 'react-router-dom';
import PropTypes from 'prop-types';

export default function(ComposedComponent) {
  class Authenticate extends React.Component {
    componentWillMount() {
      if (!this.props.isAuthenticated) {
         this.props.history.push('/');
      }
    }

    componentWillUpdate(nextProps) {
      if (!nextProps.isAuthenticated) {
        this.props.history.push('/');
      }
    }

    render() {
      return (
        <ComposedComponent {...this.props} />
      );
    }
  }

  Authenticate.propTypes = {
    isAuthenticated: PropTypes.bool.isRequired
  }

  function mapStateToProps(state) {
    return {
      isAuthenticated: state.auth.isAuthenticated
    };
  }

  return withRouter(connect(mapStateToProps, null)(Authenticate));
}