Public & private routing in react v6

Question

I'm trying to implement private and public routing in my project. But it isn't working. I'm following the latest approach.I tried alot but can't figure out the solution. Signin is comes in public Routes. And PageLayout and its childrens comes in private Route. In future, i will add roles too.

Index.js:

const router = createBrowserRouter([
  {
    path: "/signin",
    element: <Signin />,
  },
  {
    path: "/",
    element: <PrivateRoute isAuth={true} element={<PageLayout />} />,
    errorElement: <ErrorPage />,
    children: [
      {
        index: true,
        element: <Dashboard />,
      },
      {
        path: "dashboard",
        element: <Dashboard />,
      },

      {
        path: "doctors",
        element: <DoctorsPage />,
      },
      {
        path: "adddoctor",
        element: <AddDoctorPage />,
      },
])

PrivateRoute.js:

const PrivateRoute = ({ element: Element, isAuth, ...rest }) => {
  const navigate = useNavigate();

  useEffect(() => {
    if (!isAuth) {
      navigate("/signin", { replace: true });
    }
  }, [isAuth, navigate]);

  return isAuth ? <Route {...rest} element={<Element />} /> : null;
};

export default PrivateRoute;

score 1 · Accepted Answer · answered Mar 26 '23 at 12:32

I noticed one error on the code: in PrivateRoutes.js, you need to use <Outlet /> from react-router-dom instead of <Route />:

  return isAuth ? <Outlet /> : <h1>Authenticated</h1>;

It should work once this is fixed. I troubleshot this here: https://codesandbox.io/s/naughty-nobel-pphwjx?file=/src/index.js

You can refer to their documentation here: https://reactrouter.com/en/main/start/tutorial

score 0 · Answer 2 · answered Mar 26 '23 at 14:53

const router = createBrowserRouter([   {
    path: "/signin",
    element: <PublicRoute isAuth={true} element={<Signin />} />,   },   {
    path: "/",
    element: <PrivateRoute isAuth={true} />,
    errorElement: <ErrorPage />,
    children: [
      {
        path: "/",
        element: checkUserRole(
          ["superadmin", "admin", "hospital"],
          <PageLayout />
        ),
        children: [
          {
            index: true,
            element: <Dashboard />,
          },
          {
            path: "dashboard",
            element: <Dashboard />,
          },

          {
            path: "doctors",
            element: <DoctorsPage />,
          },
          {
            path: "adddoctor",
            element: checkUserRole(["superadmin"], <AddDoctorPage />),
          },
          {
            path: "patients",
            element: checkUserRole(["superadmin"], <PatientsPage />),
          },
          {
            path: "appointments",
            element: checkUserRole(["superadmin"], <AppointmentsPage />),
          },
        ],
      },
    ],   }, ]);

const PrivateRoute = ({ isAuth }) => {   const navigate = useNavigate();

  useEffect(() => {
    if (!isAuth) {
      navigate("/signin");
    }   }, [isAuth]);

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

export default PrivateRoute;

Public & private routing in react v6

2 Answers2