vue.js router use
string for matching route paths. They also use
string for rerouting (
vue.js router). This invites typos and leads to misbehavior when these strings don't match.
This gives users exhaustiveness checking - a helpful compile time error if users fail to render every route.
<a>, eslint-plugin-jsx-a11y (included in create-react-app) is unable to provide
<Link> users proper
<a> warnings (validity, content). Rather than enforce these warnings statically, the
react-router team made the (understandable) decision to ignore them.
fp-ts-routing does very little - it can parse a string to a sum type, and back again. In this author's opinion, this makes it easier to learn than, for example,
react-router, which has 4 hooks, an HOC, 11 components, esoteric and strange matching logic, and
of route params.
fp-ts-routing requires learning about sum types and the browser window api. It can be an interesting case study for io-ts. These are fundamentals, and in this author's opinion, learning about them is more fruitful than learning a routing framework's arbitrary rules.
I've put together an
fp-ts-routing video tutorial (38 min). It's for beginners, so don't worry, you don't need to know anything about fp-ts or io-ts. If you know basic typescript and basic react you'll be able to follow along.
The tutorial covers:
- union types (video)
- tagged union types (video)
There are also bonus videos that cover:
window.location.hash& history state (video)
fp-ts-routingparam & query types (video)
- a brief history of typescript adt libraries (video)
The tutorial is free. Please consider donating if you'd like to support future planned tutorials.