ReactJS error with Auth0 protectedroute

I followed Auth0’s guide to protect routes but once logged while being redirected to my dashboard I get this error:

This is my codesandbox link with involved files: App

This is App.js:

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import  Auth from 'layouts/Auth.js'
import "assets/plugins/nucleo/css/nucleo.css";
import "@fortawesome/fontawesome-free/css/all.min.css";
import "assets/scss/argon-dashboard-react.scss";
import ProtectedRoute from "auth/protected-route.js";
import AdminLayout from "layouts/Admin.js";
import { Loading } from "auth/loading.js";




const App = () => {
  const { isLoading } = useAuth0();

  if (isLoading) {
    return <Loading />;
  }

  return (
    <BrowserRouter h>
      <Switch>

        <ProtectedRoute path="/admin" render={props => <AdminLayout {...props} />} />
        <Route exact path={["/","/prometheusfinancedapp"]} component={Auth} />


      </Switch>
    </BrowserRouter>
  )
};

export default App;

My protected route:

import React from "react";
import { Route } from "react-router-dom";
import { withAuthenticationRequired } from "@auth0/auth0-react";
import  Auth  from "../layouts/Auth.js";

const ProtectedRoute = ({ component, ...args }) => (
  <Route
    component={withAuthenticationRequired(component, {
      onRedirecting: () => <Auth />,
    })}
    {...args}
  />
);

export default ProtectedRoute;

I have tried various ways to resolve the error but failed. I hope you can help me.

Hi @rutiglianomassimilia,

Welcome to the Community!

I tried to look at the code sandbox but am getting a 404 not found.

Can you fix that and post a new link?

Sorry, you’re right I don’t know what happened. So I temporarily solved using a Higher-Order component to protect a route but I would like to create a component to protect React Router paths.

Sounds good! I am going to mark this resolved :slight_smile: