React Protected Route Not Working in My App.js --- v6

Question

Help I'm using a protected route in my React app. But it is not working. All the other Elements are working but when I got to "/account" the whole screen is white. This is my code. It will be really helpful for me if you give that answer. Thank You :)

Protected Route code:

import React, { Fragment } from 'react';
import { useSelector } from 'react-redux';
import { Route, Routes, redirect } from 'react-router-dom';



const ProtectedRoute = ({ element: Element, ...rest }) => {


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



    return (
        <Fragment>

            {!loading && 
            
            
            (<Routes> 

                <Route 
                    {...rest}
                    
                    render={(props) => {

                        if(!isAuthenticated) {
                            return redirect("/login")
                        }

                        return <Element {...props} />
                    }}


                
                
                />
            
            </Routes>
            
            )}

        </Fragment>
    )
}

export default ProtectedRoute;

I am using ProtectedRoute.js in App.js. Here is the code. App.js Code:

import React from 'react';
import {BrowserRouter as Router,Route,Routes} from "react-router-dom"; 
import './App.css';
import Header from "./component/layout/Header/Header.js";
import webFont from "webfontloader";
import Footer from './component/layout/Footer/Footer';
import Home from "./component/Home/Home.js";
import ProductDetails from "./component/Product/ProductDetails.js";
import Products from "./component/Product/Products.js";
import Search from "./component/Product/Search.js";
import LoginSignUp from './component/User/LoginSignUp';
import store from "./store";
import { loadUser } from './action/userAction';
import UserOption from "./component/layout/Header/UserOption.js";
import { useSelector } from 'react-redux';
import Profile from "./component/User/Profile.js"
import ProtectedRoute from './component/Route/ProtectedRoute';

function App() {

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

React.useEffect(() => {


  webFont.load({
    google:{
      families:["Roboto","Droid Sans","Chilanka"]
    },
  });

  store.dispatch(loadUser())


}, [])


  return (
    
    <Router>
      
      <Header />
      {isAuthenticated && <UserOption user={user} />}
      
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/product/:id" element={<ProductDetails />} />
        <Route path="/products" element={<Products />} />
        <Route path="/products/:keyword" element={<Products />} />

        <Route path="/search" element={<Search />} />

        <Route path="/account" element={ <ProtectedRoute> <Profile /> </ProtectedRoute> } />

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


      </Routes>


      <Footer />
      
    </Router>
    
  );
}

export default App;

Answer 1

In your App.js you can declare the protected route like this

<Route path="/account" element={ <ProtectedRoute /> } >
    <Route path="/account" element={ <Profile /> } >
</Route>

You can use Outlet of react-router v6 for passing the Component

const ProtectedRoute = ({ element: Element, ...rest }) => {

  const { loading, isAuthenticated, user } = useSelector(state => state.user);
        
  if (loading) {
      return <h2>Loading...</h2>
  }
  return isAuthenticated ? <Outlet /> : <Navigate to="/login" />;      

}

Answer 2

I'm not sure, but you haven't pass any "element" prop to your ProtectedRoute component. You pass Profile component as children, so try render children instead of element in ProtectedRoute if you want your code to work like this.

I believe that you might want not to nest those routes, so also you might want to try use ProtectedRoute as Route in your router, I'm talking about something like this

    <Routes>
      ...

        <ProtectedRoute path="/account" element={<Profile />} />

      ...

    </Routes>

UPDATE

It might show you this error because your Route is conditionally rendered, so try to handle loading state in some other way, maybe something like this

           return (
                <Route 
                    {...rest}
                    
                    render={(props) => {

                        if(!isAuthenticated) {
                            return redirect("/login")
                        }
                        if(loading) {
                            return <LoadingComponent />
                        }

                        return <Element {...props} />
                    }}
                />
            )

Answer 3

@ Sayedul Karim.

I have a better and more concise way for this, An example of the code is below.

<Routes>
        <Route element={<App />}>
          {isAuthenticated ? (
            <>
              <Route path="/*" element={<PrivateRoutes />} />
              <Route
                index
                element={<Navigate to="/account" />}
              />
            </>
          ) : (
              <>
                <Route path="auth/*" element={<AuthPage />} />
                <Route path="*" element={<Navigate to="/auth" />} />
              </>
          )}
        </Route>
      </Routes>

In this way, you don't have to make any private component instead just make a component for private routes where the routes are defined.

The PrivateRoutes component will be like this

<Routes>
      <Route>
        {/* Redirect to account page after successful login */}
        {/* Pages */}
        <Route path="auth/*" element={<Navigate to="/account" />} />
        
        <Route path="account" element={<Account />} />
</Routes>

If any query further, feel free to ask....