Conditional Routing with createBrowserRouter

[User6531]

Hi everyone,

I would like to create a conditional routing system that depends on the response received from the back end.
Although I have a working example with a perfect flow, I would like to implement it outside of my component using createBrowserRouter.

import * as React from "react";
import {  useState } from "react";
import { BrowserRouter as Router, Routes,Route,Navigate } from "react-router-dom";
import Start from "./Start";

function App() {
  const [loggedIn, setLoggedIn ] = useState(true)
  const toggleRoute = () =>{
    setLoggedIn(!loggedIn)
  }
  return (
    <>
    <Router>
      <Routes>
        <Route
          exact
          path="start"
          element={loggedIn ? <Start /> : <Navigate replace to={"/"} />}
        />
      </Routes>
    </Router>
    <button onClick={toggleRoute}>Toggle</button>
    </>
  );
}
export default App;

I expect a solution like this:

const router = createBrowserRouter([
  {
    element: <App />,
    errorElement: <ErrorBoundaryPage />,
    children: [
      {
        element: <Main />,
        errorElement: <ErrorBoundaryPage />,
        children: [
          {
            path: routesPaths.appCatalog,
            element: {loggedIn ? <Start /> : <Navigate replace to={"/"} />}
          },
        ],
      },
    ],
  },
]);

[User6531]

@brophdawg11 @huijiewei,
I would greatly appreciate your assistance with this matter.

[brophdawg11]

I commented in #10223 (comment)

[huijiewei]

You can try use loader

const router = createBrowserRouter([
  {
    element: <App />,
    errorElement: <ErrorBoundaryPage />,
    children: [
      {
        element: <Main />,
        errorElement: <ErrorBoundaryPage />,
        children: [
          {
            path: routesPaths.appCatalog,
            loader: () => (!loggedIn ? redirect('/') : null),
            element: <Start />
          },
        ],
      },
    ],
  },
]);

[User6531]

@huijiewei Like this?

 {
  path: routesPaths.appCatalog,
  element: <AppCatalogPage />,
  loader: async () => {
    const loggedIn = await getLoggedIn();

    if (!loggedIn) {
      return redirect("/");
    }

    return null;
  },
},

[mcmurray0125]

I'm starting to look into this as well. Have you found a solution for conditional rendering with createBrowserRouter / RouterProvider?

[User6531]

At the moment, there are no solutions to implement this within createBrowserRouter.
Therefore, I've made the decision to incorporate a feature flag within each component.
It's not my preferred option, but unfortunately I haven't found a better solution yet.

If you're interested, you can learn more about this topic by visiting the following discussion.

[brophdawg11]

I left a comment in #10223 (comment) around this type of behavior

[ernestostifano]

I have referenced this thread here: #10496, might be worth reading.

[dcbaufest]

I solved this by wrapping the createBrowserRouter inside a hook and wrapping the RouterProvider in another Context to call the hook.

Custom hook:

const useRouters = () => {
   const [loggedIn, setLoggedIn ] = useState(true) 


   const PRIVATE_ROUTES: RouteObject[] = [
    {
      action: loginAction,
      element: <Login />,
      path: '/'
    },
    {
      path: routesPaths.appCatalog,
      element: {loggedIn ? <Start /> : <Navigate replace to={"/"} />}
    }, // <----- or
    ...( loggedIn ? [
      {
        path: routesPaths.appCatalog,
        element: <Start />
      }
    ] : [])
  ]

  const PUBLIC_ROUTES: RouteObject[] = []

  return createBrowserRouter([...PRIVATE_ROUTES, ...PUBLIC_ROUTES])
}

export default useRouters

main.tsx:

const ContextsProvider = () => {
  const ROUTER = useRouters()

  return (
     <OthersProvider>
        <RouterProvider router={ROUTER} />  // <---- or only this alone
     <OthersProvider />
  )
}

export default ContextsProvider