This content originally appeared on DEV Community and was authored by Daniel Kłys
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
and today I'd love to share my approach to setup <AppProviders /> with React Router v6
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.ts
ReactDOM.render(
<React.StrictMode>
<Router providers={<AppProviders />} />
</React.StrictMode>,
document.getElementById('root'),
);
Hopefully it could help any of you improving your react architecture-game.
This content originally appeared on DEV Community and was authored by Daniel Kłys
Daniel Kłys | Sciencx (2021-11-15T12:15:17+00:00) Taking advantage of react-router v6 to manage Providers. Retrieved from https://www.scien.cx/2021/11/15/taking-advantage-of-react-router-v6-to-manage-providers/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.