Как в сейчас в react-router-dom врапить компоненты?

Question

[Ivan1331]

Как я понимаю в старом синтаксисе это можно было оборачивать к примеру Header и Footer

<BrowserRouter>
    <Header />
    <Switch>
      <Route path={ROUTES.SETTINGS} component={Settings} />
      <Route path="*" component={NotFound} />
    </Switch>
  <Footer />
  </BrowserRouter>

А как делать это в новом вот таком синтаксисе?

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
  },
    {
        path: '/',
        element: <ProductList />,
    }
]);

export const Router = (): JSX.Element => (
  <>
    <RouterProvider router={router} />
  </>
);

Делать компонент обёртку? Или мб всё таки есть какие то способы в самой либе?

Comments

[Александр]

Можно и обертку, можно из либы - Outlet.