import React from 'react'

import { Redirect, Route } from 'react-router-dom'

​

const Protected = ({ component, ...rest }) => {

    <Route

        {...rest}

        render={() => {

            localStorage.getItem('login') ? (

                <component {...props} />

            ) : (

                <Redirect to='/login' />

            )

        }}

    />

};

export default Protected

​

​

// app.js 

import Protected from'./components/Protected'

​

<Router>

<Protected exact path="/"component={Home}/>

<Protected exact path="/about"component={About}/>

<Protected exact path="/contact"component={Contact}/>

</Router>

// create a file (e.g privateRoute.js) write this code

​

import { Navigate, Outlet } from "react-router-dom";

​

const useAuth = () => {

  const user = { loggedIn: localStorage.getItem("tokenId") };

  return user && user.loggedIn;

};

​

const ProtectedRoutes = () => {

  const isAuth = useAuth();

  return isAuth ? <Outlet /> : <Navigate to="/" />;

};

​

export default ProtectedRoutes;

​

// then app.js should look this way

​

import React from "react";

import { BrowserRouter, Routes, Route } from "react-router-dom";

import other components that you need...

​

<BrowserRouter>

      <Routes>

        <Route path="*" element={<NotFoundPage />} />

        <Route path="/" element={<LoginPage />} />

        <Route element={<ProtectedRoutes />}>

          <Route path="/user-list" element={<UserListPage />} />

          <Route path="/add-user" element={<AddUserPage />} />

          <Route path="/user-details/:id" element={<UserDetailsPage />} />

          <Route path="/update-user/:id" element={<UpdateUserPage />} />

        </Route>

      </Routes>

</BrowserRouter>

//Create Privateroutes.jsx

import { Navigate, Outlet } from 'react-router-dom'

const PrivateRoutes = () => {

  let auth = {'token':true}

return (

    auth.token ? <Outlet/> : <Navigate to='/login'/>

  )

}

​

import { BrowserRouter as Router, Routes, Route} from 'react-router-dom'

import PrivateRoutes from './auth/PrivateRoutes';

.

.

.

​

...

function App() {

  return (

    <Router>

        <Routes>

          <Route element={<PrivateRoutes/>}>

              //All routes inside this route are protected

              <Route path='/' element={<Users/>} />

              <Route path='/products' element={<Products/>} />

          </Route>

          <Route path='/login' element={<Login/>}/>

        </Routes>

    </Router>

  );

}

import { Navigate, Outlet } from 'react-router-dom';

​

const PrivateRoutes = () => {

  const location = useLocation();

  const { authLogin } = useContext(globalC);

  console.log("authLogin", authLogin);

​

  return authLogin 

    ? <Outlet />

    : <Navigate to="/login" replace state={{ from: location }} />;

}

<BrowserRouter>

  <Routes>

    <Route path="/" element={<PrivateRoutes />} >

      <Route path="/dashboard" element={<Dashboard />} />

      <Route path="/about" element={<About />} />

    </Route>

    <Route path="/login" element={<Login />} />

    <Route path="*" element={<PageNotFound />} />

  </Routes>

</BrowserRouter>

import { Switch, Route, Redirect } from "react-router-dom";

​

function App() {

  return (

    <Switch>

      <Route path="/public">

        <PublicPage />

      </Route>

      <Route

        path="/protected"

        render={() => (

          <RequireAuth redirectTo="/login">

            <ProtectedPage />

          </RequireAuth>

        )}

      />

    </Switch>

  );

}

​

function RequireAuth({ children, redirectTo }) {

  let isAuthenticated = getAuth();

  return isAuthenticated ? children : <Redirect to={redirectTo}>;

}