How Reusing layouts in React Router v6.4.4 ?

[li-jia-nan]

In a React Router application it's very common to want to render a default set of components on every route, such as a header and footer, bug I don't know how to use it with <RouterProvider router={createBrowserRouter(routes)} />.

Please give me some guidance, thanks !

[MeiKatz]

That's also a thing that I tried to solve by myself but haven't found a good solution so far. I think there where plans to support multiple parallel outlets. Something other I could image is using contexts that place headers and footers at the wanted location.

[MeiKatz]

Here's an example how you could solve it: https://codesandbox.io/s/react-use-header-context-oyb0ph?file=/src/Header.js