0

#Ask in my exercise im trying to implement protected route in my react project. but im still confused with updated react router dom in version 6 above from route. when user logout then if user access profile must redirect to login page. but its not. maybe everyone can help me. im still find the problem right now. enter image description hereenter image description here

<Router>
    <div className="App">
      <Header/>
      <div className="container container-fluid">
        <Routes>
          <Route path="/" element={<Home/>} exact />
          <Route path="/search/:keyword" element={<Home/>}/>
          <Route path="/product/:id" element={<ProductDetails/>} exact />

          <Route path="/login" element={<Login/>}/>
          <Route path="/register" element={<Register/>}/>            
          <Route path='/me' element={<ProtectedRoute>
              <Profile/>
          </ProtectedRoute>} exact/>
        </Routes>
      </div>
      <Footer/>
    </div>
    </Router>

and this is my protectedroute page

import React, { Fragment } from "react";
import { Outlet, Navigate } from 'react-router-dom'
import { useSelector } from "react-redux";

    const ProtectedRoute = ({ component: Component, ...rest }) => {

    const { isAuthenticated, loading } = useSelector(state => state.auth)

  return (
    <Fragment>
        {loading === false && (
            <Outlet
                {...rest}
                render={props => {
                    if(isAuthenticated === false) {
                        return <Navigate to='/login' />
                    }                    

                    return <Component {...props} />
                }}
            />
        )}
    </Fragment>
  );
};

export default ProtectedRoute;

do you have same experience ? please help. Thank you

MaskAnoton
  • 3
  • 2

1 Answers1

0

Private route:

import React from 'react';
import { useLocation, Navigate } from 'react-router-dom';
//routes
//replace the following with your own url
import { getLoginPageUrl } from '../routingConstants/AppUrls';

const PrivateRoute = ({ children }) => {
    const location = useLocation();

    //to be revised
    if (localStorage.getItem('token')) {
        return children;
    }

    return <Navigate replace to={getLoginPageUrl()} state={{ from: location }} />;
};

export default PrivateRoute;

Usage:

<Routes>
        <Route
            path="/profil"
            element={
                <PrivateRoute>
                    <ProfilePage />
                </PrivateRoute>
            }
        />
</Routes>
Adam Morsi
  • 351
  • 1
  • 7