27
loading...
Taking advantage of react-router v6 to manage Providers
All of us know how tricky may react architecture be. One of the best approach that I bumped into during my react developer career was to move files around until it feels right
React Router provides us with powerful tool which is nested routes. Right now we may create routes in the following fashion:
export const Router = ({ providers }: { providers: React.ReactElement }) => (
<BrowserRouter>
<Routes>
<Route path={AppRoute.home} element={providers}>
<Route index element={<Home />} />
</Route>
</Routes>
</BrowserRouter>
);and if our
<AppProviders /> contains <Outlet/> inside, it will also render content of our subroute, in this case <Home />, as it is index ('/') of our precedent route.So what we want to do is create our
<AppProviders /> right now:export const AppProviders = () => {
const queryClient = new QueryClient();
const theme = createTheme();
return (
<QueryClientProvider client={queryClient}>
<CssBaseline />
<ThemeProvider theme={theme}>
<Layout>
<Outlet />
</Layout>
</ThemeProvider>
{openReactQueryDevtools && <ReactQueryDevtools initialIsOpen={false} />}
</QueryClientProvider>
);
};We could make more levels of routing to handle styles and
<Layout /> appearance but in this simple scenario it's not necessary. Then we could simply pass our
<AppProviders /> as an prop to our Routing where we want to do it, for me it's index.tsReactDOM.render(
<React.StrictMode>
<Router providers={<AppProviders />} />
</React.StrictMode>,
document.getElementById('root'),
);
Hopefully it could help any of you improving your react architecture-game.
27