Renewcomb Router for React

Features

• supports relative urls with ./ and ../
• unprefixed urls assume / root not ./ current as it is the most common case
• no magic "router outlet"; routed components appear as the children of the router component
• lazy-loading components
• synchronous unless lazy-loading, for better animations
• goto function is outside of React ecosystem
• no hooks; url parameters and dataloads are passed to the component via props
• 150 lines of code only, including typescript interfaces
• set a Loading component globally plus override with a per-route skeleton instead
• pass arbitrary data through goto function
• route guard if and matching else function
• if lazy-loading modules with a default export, no need to specify the component name
• route config errors are explicit and appear obviously; no need to dig around in console.log with blank screens
• no useEffect!
• delays Loading displays for a macrotick in case remote data is in an async cache; prevents flashing "loading" for a tick

Coming Features

• keeping previous route for X milliseconds for animation transition.
• Test animations.
• Children routes.
• Wildcard routes.
• Nested routers.
• Partial router config; lazy-load more router config.

Discarded Features

• Can't just have the component: be a string for dynamic import() because the bundler cannot fix the path.

• Routes definition just being a key-value object was messier than expected when using deep routes with parameters. Too much punctuation.

Broken out into pieces

1. the url reader and changer, the goto function.
2. the tabset-without-tabstrip.
3. the component loader, data loader, and promise problems
4. the isloading screen for unresolved promise phase.
5. the animation interstitial phase.
6. the route config that connects URL to Component, whose goto changes "tab"
7. the exiting tab panel to be kept until animation finishes.