Почему компонент PrivateRoute не работает, когда BrowserRouter является дочерним элементом Auth0Provider? - PullRequest
Новая
       22

Почему компонент PrivateRoute не работает, когда BrowserRouter является дочерним элементом Auth0Provider?

0 голосов
/ 08 февраля 2020

Я потратил некоторое время, чтобы получить защищенную \ приватную маршрутизацию, работающую в приложении ReactJS ... используя <PrivateRoute> компонент из здесь .

У меня было это: 

ReactDOM.render(
    <Auth0Provider
        domain={config.domain}
        client_id={config.clientId}
        redirect_uri={config.callbackUrl}
        onRedirectCallback={onRedirectCallback}>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </Auth0Provider>,
    document.getElementById('root'));

Вход с помощью Auth0 работает просто отлично, но когда я возвращаюсь в приложение, я просто вижу домашнюю страницу / маршрут, хотя URL-адрес браузера меняется на /protectedroute.

/protectedroute - это <PrivateRoute> , Когда я нажимаю на ссылку, которую он перенаправляет на Auth0 арендатора, как и ожидалось, я успешно вхожу в систему и возвращаюсь в приложение React JS ... но он отображает домашний / незащищенный маршрут. Если я снова нажму на ссылку /protectedroute, она будет отображаться, как и ожидалось.

Я заработал, но мне пришлось отказаться от <BrowserRouter> в index.js. Пришлось переместить его внутрь App.js. Итак, index.js теперь выглядит следующим образом: 

ReactDOM.render(
        <Auth0Provider
            domain={config.domain}
            client_id={config.clientId}
            redirect_uri={config.callbackUrl}
            onRedirectCallback={onRedirectCallback}>
                <App />
        </Auth0Provider>,
        document.getElementById('root'));

Что является причиной того, что реагирующий маршрутизатор не может отобразить защищенный \ закрытый маршрут, когда <BrowserRouter> вложен в Index.js? Я предполагаю, что вложение как-то нарушает компонент <PrivateRoute>.

Это код компонента <PrivateRoute>: 

// src/components/PrivateRoute.js

import React, { useEffect } from "react";
import { Route } from "react-router-dom";
import { useAuth0 } from "../react-auth0-spa";

const PrivateRoute = ({ component: Component, path, ...rest }) => {
  const { loading, isAuthenticated, loginWithRedirect } = useAuth0();

  useEffect(() => {
    if (loading || isAuthenticated) {
      return;
    }
    const fn = async () => {
      await loginWithRedirect({
        appState: { targetUrl: path }
      });
    };
    fn();
  }, [loading, isAuthenticated, loginWithRedirect, path]);

  const render = props =>
    isAuthenticated === true ? <Component {...props} /> : null;

  return <Route path={path} render={render} {...rest} />;
};

export default PrivateRoute;
...