Type Route beta
Type Route is a flexible, type safe routing library built on top of the same core library that powers React Router.
Type Route was designed with excellent React integration in mind but isn't coupled to a specific UI framework. Most code examples in the documentation use React, but the general principles covered apply regardless of framework.
Continue reading this introduction for a quick overview of how to start using Type Route in your React project. Find a full runnable version of the below introduction on the Simple React Example page or see the Type Route without React guide to learn how to use Type Route without React.
🚨 This is a beta release. 🚨 The Type Route API has been vetted with production code but the library has not yet reached version 1.0. More community feedback is needed to validate the project's maturity. Use the issue tracker to communicate this feedback in the form of bugs, questions, or suggestions.
Type Route's primary distribution channel is the NPM registry. React
16.8 (or any subsequent version of React) is a peer dependency of Type Route so you'll need to ensure that's installed as well.
npm install type-route react
Step 1: Create a Router
Best practice is to immediately destructure the result of
createRouter into the properties you'll be using in your application. The
createRouter function accepts an object with route names and route definitions created via
defineRoute and returns a new router.
Step 2: Connect Router to Application
Wrap your entire application in the
<RouteProvider> component returned by
Step 3: Display Current Route
Inside the code blocks above the TypeScript compiler (and your editor) will be able to correctly infer the type of
route. This allows you, for instance, to pass the
user route to the
UserPage component and access the
userId param with confidence in code blocks where it will definitely exist.
Step 4: Navigate Between Routes
link property is an object with an
href attribute and an
onClick function. You need both to properly render a link in a single page application. Immediately spreading the
link object into the properties of an
<a> tag makes usage simple. Programmatic navigation is possible with the
replace functions of a specific route. Type Route also supports extending the behavior of a link to cover more complex scenarios.
Hopefully that was enough to point you in the right direction!
If you need more guidance there is a full runnable version of the above code on the Simple React Example page. The Guides section of the documentation has detailed overviews and examples for most use cases. Additionally, the API Reference section has descriptions and examples for each part of the API.
Type Route is a Type Hero project.