React app using Auth0 (of course) as ID provider
App currently only has two routes, home, and a test route to test integration with backend.
If I leave conditional rendering turned on, I can log into the app and only see the home page. Any attempt to navigate to anything else kicks me out and back to the login screen.
If I turn the check for isAuthenticated off, or just flip the bool, the app renders and loads the pages fine.
I presume I’m messing something in regards to TS, as this isn’t my first Auth0/React rodeo, and I’ve never had this issue before.
Code:
import React from "react";
import logo from "./logo.svg";
import "./App.scss";
import { SideBar } from "./components/sidebar/Sidebar";
import { Header } from "./components/header/Header";
import { Route, Switch } from "react-router-dom";
import { useAuth0 } from "@auth0/auth0-react";
import { Login } from "./components/login/Login";
import Home from "./components/home/Home";
import ListRaceCarParts from "./components/test-components/race-car-parts/ListRaceCarParts";
import PageNotFound from "./components/Error/PageNotFound";
function App(): any {
const { isAuthenticated } = useAuth0();
if (!isAuthenticated) {
return (
<div className="grid-container">
<div className="sidebar">
<SideBar />
</div>
<div className="main-content">
<div className="header">
<Header />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/racecarpartstest" component={ListRaceCarParts} />
<Route component={PageNotFound} />
</Switch>
</div>
<div className="content-body"></div>
</div>
</div>
);
}
if (!isAuthenticated) {
return <Login />;
}
}
export default App;`Preformatted text`
