Any help with my protected routes react.js

Help
,
1

my protected pages do not rendred in react.js any help with i’ll be thankful

PrivateRouter.js code

import React from 'react';
import { Routes, Route, Navigate } from "react-router-dom";

const PrivateRouter = ({component, ...props}) => {
    const firstLogin = localStorage.getItem('firstLogin')
    return firstLogin ? <Routes><Route {...props}/></Routes> : <Navigate to="/" />
}

export default PrivateRouter

App.js code

return (
    <Router>
      <Alert />
      <input type="checkbox" id="theme"/>
      <div className="App">
        <div className="main">
            {auth.token && <Header/>}
          <Routes>
            <Route exact path="/" element={auth.token ? <Home/> : <Login/>} />
            <Route exact path="/register" element={<Register/>} />

            <Route exact path="/:page" element={
            <PrivateRouter component={PageRender}/>} />
            <Route exact path="/:page/:id" element={
            <PrivateRouter component={PageRender}/>} />
        </Routes>
        </div>
      </div>
    </Router>
  );

When I go to the home page, everything happens normally, but when I try to go to the privateRouter Route, the content disappears, and only the header routes remain.

thanks in advance

3

Hi @phoenixdraga,

Welcome to the Auth0 Community!

Have you seen our example?