React Router Dom, protected route, getting ProtectedRoute is not a route

Question

I created file auth.js file and ProtectedRoute.js in my application. Using JWT in API created a token and stored in local storage while login into my application. In my app.js imported the Authprovider and ProtectedRoute it shows error in route.please check my code and tell me where i made mistake

auth.js

  import { useContext, createContext } from "react";

  const AuthContext = createContext(null)

  export const AuthProvider=({ children })=>{

  const keyToken = localStorage.getItem("token");
  const user = localStorage.getItem("name");
  const userid = localStorage.getItem("id");
  const pimg = localStorage.getItem("profile");

  return(
         <AuthContext.Provider value={{ keyToken,user,userid,pimg}}> {children} 
         </AuthContext.Provider>
      )
    } 

   export const useAuth = () => {
           return useContext(AuthContext)
     }

protectedRoute.js

import React from "react";
import { Navigate , Route } from "react-router-dom";
import {useAuth} from "./auth"

function ProtectedRoute({ component: Component, ...restOfProps }) {

  const auth=useAuth();
  const isAuthenticated = auth.keyToken;
  console.log("this", isAuthenticated);
 

  return (
    <Route
      {...restOfProps}
      render={(props) =>
        false ? <Component {...props} /> : <Navigate  to="/login" />
      }
    />
  );
}

export default ProtectedRoute;

App.js

import React from "react";
import ReactDOM from "react-dom";
import {BrowserRouter as Router,Routes,Route} from 'react-router-dom';
import Login from "./components/SignIn";
import Category from "./pages/Category";
import Addcategory from "./pages/Addcategory";
import Subcategory from "./pages/Subcategory";
import Dashboard from "./pages/Dashboard";
import { Profile } from "./components/Profile";
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { AuthProvider} from "./components/authentication/auth";
import ProtectedRoute from "./components/authentication/protectedRoute";

function App() {
  return (
    <AuthProvider>
    <Router>
      <Routes>
          <Route exact path='/' element={< Login />}></Route>
          <Route exact path='/login' element={< Login />}></Route>
         <ProtectedRoute exact path='/dashboard' element={ Dashboard}/>
         {/*<Route exact path='/dashboard' element={< Dashboard />}></Route>*/}
          <Route exact path='/category' element={< Category />}></Route>
          <Route exact path='/categoryAdd' element={< Addcategory />}></Route>
          <Route exact path='/subcategory' element={< Subcategory />}></Route>
         <Route exact path='/profile' element={< Profile />}></Route> 
      </Routes>
      <ToastContainer />
    </Router>
    </AuthProvider>
  );
}
ReactDOM.render(<App />, document.getElementById("root"));

export default App;

Error showing in console:

Answer 1

While what you did for ProtectedRoute I think would work for React Router Dom version 5, the version 6 is slightly different. Here is one way to do it (look at this example made by the library team to know more):

App.js:

function App() {
  return (
    <AuthProvider>
    <Router>
      <Routes>
          <Route exact path='/dashboard' element={ <ProtectedRoute/>}/>
      </Routes>
      <ToastContainer />
    </Router>
    </AuthProvider>
  );
}

ProtectedRoute.js:

function ProtectedRoute() {

  const auth=useAuth();
  const isAuthenticated = auth.keyToken;

  if(isAuthenticated){
    return <Dashboard/>
  }
  return (
    <Navigate  to="/login" />
   );
}

export default ProtectedRoute;

Answer 2

You have mixed code of react-router-dom v5 and v6 you can read the migrate guide upgrading from v5

Can using Outlet to render ProtectedRoute as layout. Check this example

// ProtectedRoute.js
import { Navigate, Outlet } from 'react-router-dom';

export const ProtectedRoute = () => {
  const location = useLocation();
  const auth = useAuth();

  return auth.isAuthenticated
    ? <Outlet />
    : <Navigate to="/login" state={{ from: location }} replace />;
};

// App.js
import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <AuthProvider>
      <BrowserRouter>
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route path="/" element={<ProtectedRoute /> }>
            <Route path='dashboard' element={<Dashboard />} />
            <Route path='category' element={<Category />} />
            // rest of your code
          </Route>
        </Routes>
        <ToastContainer />
      </BrowserRouter>
    </AuthProvider>
  );
}