0

I'm doing front-end project with little back-end for signup and registering user. I'm using firebase and I'm following one tutorial how to do it with PrivateRoute, but all videos are using Router and Routes convention and not new createBrowserRouter API. Can anyone help me refactor PrivateRoute below and how to apply it in createBrowserRouter? Thank you

import { createBrowserRouter, RouterProvider } from "react-router-dom";

import Bookmarks from "./components/pages/Bookmarks";
import HomePage from "./components/pages/HomePage";
import Movies from "./components/pages/Movies";
import RootLayout from "./components/pages/RootLayout";
import TvSeries from "./components/pages/TvSeries";
import SignUpPage from "./components/pages/SignUpPage";
import LoginPage from "./components/pages/LoginPage";

import { AuthProvider } from "./store/AuthContext";

const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    children: [
      { index: true, element: <HomePage /> },
      { path: "movies", element: <Movies /> },
      { path: "tvseries", element: <TvSeries /> },
      { path: "bookmarks", element: <Bookmarks /> },
      { path: "signup", element: <SignUpPage /> },
      { path: "login", element: <LoginPage /> },
    ],
  },
]);

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

export default App;


Now code to refactor and apply to above code

import { Route, Redirect } from "react-router-dom";
import { useContext } from "react";

import { AuthContext } from "../store/AuthContext";

const PrivateRoute = ({ component: RouteComponent, ...rest }) => {
  const { currentUser } = useContext(AuthContext);

  return (
    <Route>
      {...rest}
      render=
      {(routeProps) =>
        !!currentUser ? (
          <RouteComponent {...routeProps} />
        ) : (
          <Redirect to={"/login"} />
        )
      }
    </Route>
  );
};

export default PrivateRoute;

Now code to refactor and apply to above code

......................

DevTom
  • 1

0 Answers0