Private routing with react router 6.4

Question

I am using this newer feature of react router:

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<RootLayout />}>
      <Route index element={<Landing />} />
      <Route path="login" element={<Login />} />
      <Route path="signup" element={<SignUp />} />
      <Route path="manager" element={<ManagerLayout />}>
        <Route index path="dashboard" element={<Dashboard />} />
        <Route path="team" element={<TeamLayout />}>
          <Route path="personel" element={<Personel />} />
        </Route>
        <Route path="profile" element={<Profile />} />
      </Route>
      <Route path="*" element={<NotFound />} />
    </Route>
  )
)

function App() {
  return (
    <AuthProvider>
      <RouterProvider router={router} />
    </AuthProvider>
  );
}

I need to restrict access to some routes and I tried doing it by creating this component:

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

function PrivateRoute({ element, ...rest }) {
    const { isLoggedIn } = useAuth();

    return isLoggedIn ? (
        <Route {...rest} element={element} />
    ) : (
        <Navigate to="/login" replace />
    );
}

export default PrivateRoute;

However, I get the following error:

Uncaught Error: [PrivateRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

How can I handle private routes with this new feature of react router?

Private routing with react router 6.4

0 Answers0