Question

172

How to template jsx with createBrowserRouter

rated 0 times [ 178] [ 6] / answers: 1 / hits: 6394 / 2 Years ago, sun, october 23, 2022, 12:00:00

From my understanding:

<Route loader...> "only works if using a data router"

data routers (like createBrowserRouter) don't allow for wrapping 'all' of the routes in jsx containing <Link> components. See examples

Example: Non data routers

<Router>

  <header>

    <Link to="/">Home</Link>

  </header>

  <Routes>

    <Route...>

    <Route...>

  </Routes>

</Router>

Example: data routers (throws error) full example

const router = createBrowserRouter([....]);

<div>

  <header>

    <Link to="/">Home</Link>

  </header>

  <RouterProvider router={router} />

</div>

My question is this: How can we create a template that wraps the RouterProvider (and all the content it imports) with a template that makes use of <Link> functionality?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

daphnew

Add To Favorites

Follow

Total Points: 716

Total Questions: 113

Total Answers: 113

Location: Bonaire

Member since Sat, May 1, 2021

3 Years ago

daphnew questions

1 angular 13: Module not found: Error: Can't resolve 'rxjs/operators'

Wed, Jan 5, 22, 00:00, 2 Years ago

1 Deletable Chips in Material UI Multiple Select

Tue, Nov 3, 20, 00:00, 4 Years ago

1 Does Promise.all() run in sequential or parallel?

Fri, Sep 4, 20, 00:00, 4 Years ago

1 TypeError: can't define property current: Object is not extensible

Thu, Jul 16, 20, 00:00, 4 Years ago

1 Firebase send email verification to user

Thu, Apr 23, 20, 00:00, 4 Years ago

View All

answered 2 Years ago shannon · Accepted Answer

Render the header/Navbar component as part of the routing configuration. In this case you'll create a layout route that renders the header and navbar, and an Outlet for nested routes to render their content into.

Example:

export const Navbar = () => {

  return (

    <div>

      <Link to='/'>Home</Link>

      <Link to='/foo'>Foo</Link>

      <Link to='/bar'>Bar</Link>

    </div>

  );

};

...

import {

  createBrowserRouter,

  RouterProvider,

  Outlet

} from 'react-router-dom';



const HeaderLayout = () => (

  <>

    <header>

      <Navbar />

    </header>

    <Outlet />

  </>

);



const router = createBrowserRouter([

  {

    element: <HeaderLayout />,

    children: [

      {

        path: "/",

        element: <div>Hello</div>,

      },

      {

        path: '/foo',

        element: <div>foo</div>,

      },

      {

        path: '/bar',

        element: <div>foo</div>,

      }

    ],

  },

]);



export function App(props) {

  return (

    <div className='App'>

      <RouterProvider router={router} />

    </div>

  );

}