upgrade-to-data-router.jsx

function App() {
  return (
    <Routes>
      <Route path="/" element={<Root />}>
        <Route index element={<Index />} />
        <Route path="projects" element={<Projects />} />
      </Route>
    </Routes>
  );
}

//////////////////////////////////////////////////////////
// Pre 6.4 your entry file looks something like this:
const root = createRoot(document.getElementById("root"));

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

//////////////////////////////////////////////////////////
// You can incrementally upgrade to a data-enabled routes
const root = createRoot(document.getElementById("root"));

// Start with a new router that has a single splat route
// no other code changes needed
const router = createBrowserRouter([
  { path: "*", element: <App /> }
]);

root.render(
  <RouterProvider router={router} />
);

// then incrementally move routes out of <App/> into the
// new router and simplify your data!