cleanup: use RR route module exports to clean up routes.tsx

[david-crespo]

I didn't bother doing all of them, but I did a bunch of the ones that make the route file shorter as a proof of concept. The route config is really verbose and it makes it a bit unwieldy, especially after #2529. This change is better than it looks in terms of line count because we are adding a few lines outside the route config to save lines inside it:

$ git diff --stat main... -- app/routes.tsx
 app/routes.tsx | 285 ++++++++++++++++++++------------------------------------------------
 1 file changed, 82 insertions(+), 203 deletions(-)

However, this change has another big advantage besides looking nice: by conforming to RR's route module API, we can trivially convert <Route {...ProjectsPage}> to <Route lazy={() => import('./pages/ProjectsPage')} to get bundle splitting when and where we want it. This all also will make it easier to convert to the lovely new route config format in React Router v7.

Example use of <Route lazy>

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
console	✅ Ready (Inspect)	Visit Preview	Nov 12, 2024 5:26pm

[david-crespo]

We could export handle from the module too, but I think that would make it impossible to reason about the crumbs by looking at the config. The components and loaders don’t have this problem.