I am building a dashboard application using React, Shadcn-UI, and React-Router-Dom. The dashboard has a sidebar for navigation and various pages displaying data tables using React-Table.
<code>const App = () => {
const router = createBrowserRouter([
{
path: "/",
element: <ProtectedRoute><RootLayout /></ProtectedRoute>,
children: [
{ index: true, element: <Dashboard /> },
{ path: "/rolls", element: <RollsPage /> },
{ path: "/slits", element: <SlitsPage /> },
],
},
{ path: "*", element: <>404</> },
]);
return <RouterProvider router={router} />;
};
export default App;
</code>
<code>const App = () => {
const router = createBrowserRouter([
{
path: "/",
element: <ProtectedRoute><RootLayout /></ProtectedRoute>,
children: [
{ index: true, element: <Dashboard /> },
{ path: "/rolls", element: <RollsPage /> },
{ path: "/slits", element: <SlitsPage /> },
],
},
{ path: "*", element: <>404</> },
]);
return <RouterProvider router={router} />;
};
export default App;
</code>
const App = () => {
const router = createBrowserRouter([
{
path: "/",
element: <ProtectedRoute><RootLayout /></ProtectedRoute>,
children: [
{ index: true, element: <Dashboard /> },
{ path: "/rolls", element: <RollsPage /> },
{ path: "/slits", element: <SlitsPage /> },
],
},
{ path: "*", element: <>404</> },
]);
return <RouterProvider router={router} />;
};
export default App;
RootLayout.jsx:
<code>function RootLayout() {
return (
<SidebarProvider>
<AppSidebar />
<main>
<Header />
<Outlet />
</main>
</SidebarProvider>
);
}
export default memo(RootLayout);
</code>
<code>function RootLayout() {
return (
<SidebarProvider>
<AppSidebar />
<main>
<Header />
<Outlet />
</main>
</SidebarProvider>
);
}
export default memo(RootLayout);
</code>
function RootLayout() {
return (
<SidebarProvider>
<AppSidebar />
<main>
<Header />
<Outlet />
</main>
</SidebarProvider>
);
}
export default memo(RootLayout);
RollsPage.jsx:
<code>function RollsPage() {
return <RollTable />;
}
export default memo(RollsPage);
</code>
<code>function RollsPage() {
return <RollTable />;
}
export default memo(RollsPage);
</code>
function RollsPage() {
return <RollTable />;
}
export default memo(RollsPage);
Question:
How can I prevent page re-rendering when navigating between routes in this setup? Are there better ways to optimize rendering for complex tables with actions and buttons in columns? Any tips on React-Router or React-Table configurations would be greatly appreciated!
9