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.

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:

function RootLayout() {
  return (
    <SidebarProvider>
      <AppSidebar />
      <main>
        <Header />
        <Outlet />
      </main>
    </SidebarProvider>
  );
}

export default memo(RootLayout);

RollsPage.jsx:

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!