Skip to content

Instantly share code, notes, and snippets.

@ryanflorence
Created March 2, 2023 14:48
Show Gist options
  • Save ryanflorence/9b5c216ca759622ee0651864ecc026b6 to your computer and use it in GitHub Desktop.
Save ryanflorence/9b5c216ca759622ee0651864ecc026b6 to your computer and use it in GitHub Desktop.
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!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment