createBrowserRouter inside component

[kristersd]

Does using createBrowserRouter or any createRouter descendant is allowed inside a React Component?
Does the only way to pass props around the Route elements are to use Context API?

Poking around the source code, it appeals to me that it is not possible, but the docs doesn't mention anything, that this would be against the implementation details.

An example, having createBrowserRouter inside Component.

const App = () => {
  const [foo, setFoo] = useState("");
  const router = createBrowserRouter([
    {
      path: "/",
      element: <Foo foo={foo} />,
    },
    {
      path: "/profile",
      element: <Profile foo={foo} setFoo={setFoo} />,
    },
  ])
  
  return <RouterProvider router={router} />
};

[User6531]

[kristersd]

Hi, as I mentioned in the discussion, I am aware I can use Context API or Redux, the question still implies, can you define createBrowserRouter inside component itself.

[brophdawg11]

We should probably make this more clear in the docs (PR's welcome!) but the intention is that your router is a singleton for your application as shown in the docs. If you are doing it inside a react component then you end up creating a new router anytime that component re-renders which will blow away any old state of the router.

Instead, you can setup or create contexts in your App component or a root layout component, and then access them from inside your route components. You cannot leverage context in loaders and actions since that breaks the decoupling of fetching and rendering which is at the core of the 6.4+ data API design.

[User6531]

yes, you should definitely put it in the docs

[ninoalte]

Hello,

how would i use a Context.Provider that wraps all my routes, when using createBrowserRouter?

[brophdawg11]

Put it in a root layout route:

let router = createBrowserRouter([{
  path: '/',
  Component() {
    return (
      <MyContext.Provider value={value}>
        <Outlet/>
      </MyContext.Provider>
    );
  },
  children: [/* all app routes here */],
});

[aezing]

Just wrap your <RouterProvider router={routers}/> with <MyContext.Provider value={value}>

[andersonbruno]

I have a question, what if my auth provider needs the navigate? and the router needs to know what is the user type to render a route or not.

I could do the layout, but then I cannot access my authProvider to know which element/component to render, based on the user type.

They kinda depend on each other, with BrowserRoute that was not a problem, because it was wrapping all the componentes, including the Routes component, so I could acess user information to render conditionally.

Is there a way I can force a refresh when logging ?

[brophdawg11]

An important thing that is often missed is that your "Providers" are not the "source of truth". Providers take data from somewhere in JS memory and make it available to the React tree. The key when using RouterProvider is to find the source of truth that your authProvider is reading from and leverage that in your loaders to check auth status.

Here's a simple example: https://github.com/remix-run/react-router/tree/main/examples/auth-router-provider

And often times, your provider comes from an external source, but those almost always give you some way to access the underlying source of truth other than the provider. Here's an example using Auth0: https://github.com/brophdawg11/react-router-auth0-example

RouterProvider decouples fetching from rendering in order to flatten waterfalls - and as such you need to shift some previous React approaches which relied on a tight coupling of render-then-fetch which introduces waterfalls and spinner-ridden UI's.