Reactjs React v6 中的公共和私有路由

我正在try 在我的项目中实现私有和公共路由.但这并不管用.我正在遵循最新的方法.我试了很多次，但还是想不出解决办法. 登录是在公共路由上进行的.而PageLayout和它的子项则是通过私有路径实现的.以后，我也会增加角色.

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;