Question 72916 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Public & private routing in react v6 – Reactjs

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;
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    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;

  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search