averollc / typesafe-react-router Goto Github PK
View Code? Open in Web Editor NEWUtility functions to help facilitate type-safe routing with react-router
License: Apache License 2.0
Utility functions to help facilitate type-safe routing with react-router
License: Apache License 2.0
Is this project actively maintained? Not sure where else I would ask this question
Hi!
I had a need for this kind of type safe routing a coupe of months ago. I didn't find any library, so I implemented my own. The basic idea is very similar to yours, but has some pros and cons.
https://github.com/geon/routes/blob/master/usage.ts
Most importantly, my routes has properly typed params, not just named strings. I do this by passing a parse
function to the route creator. This function converts a {[paramName: string]: string}
to a type object of type TParams
.
The parameters are also validated. They can be checked to conform to some regex, or checked to exist in an array, etc.
The output-ed typed params object does not need to have the same number of properties ar the input. Properties like pageNumber
and pageSize
can be lumped together into a pagination
object.
This was invaluable when developing our app.
A minor but neat feature I implemented was bread crumb generation. Each route has a function that takes params and returns a title string. Optionally, it also has a previous page route. Using this, we can easily generate an array of titles + hrefs, that can be rendered as a bread crumb.
I had just upgraded node modules and noticed that typesafe-react-router was updated.
Builds are all of a sudden causing an issue:
ERROR in ./src/routes.ts
Module not found: Error: Can't resolve 'typesafe-react-router' in '/Users/jason/go/src/***/***/projectname/src'
I created a demo project and had the same problems:
https://github.com/jasonraimondi/trr-issue-example-repo
I was able to hard version to 2.0.0 so it is not a huge problem, but it does seem to be consistently happening in separate projects of mine, so it may start revealing itself to others.
When transpiling the module we're doing from typescript down to ES2015 javascript. Not every bundler/browser can read ES2015 as of yet.
Could we instead transpile the module to CommonJS. Making it compatible with legacy browsers and tools?
We need a useParams hook to use params type safe
I love this lib, simple and focused.
I think you may want to spend another hour of work to:
QueryParams
type, modelled after RouteParams
QueryParams
& RouteParams
Route
component's paramsUser-land typesafe usage example of ReactRouter Route
component:
import React from "react";
import { Route as RouteComponent, RouteProps, RouteComponentProps } from "react-router-dom";
import { RouteParams, Route } from "typesafe-react-router";
type QueryParams<T> = T extends Route<any, infer Y> ? Partial<Record<Y[number], string>> : never;
interface MatchProps<R extends Route<any, any>>
extends Omit<RouteProps, "path" | "render" | "component" | "children"> {
route: R;
component?: React.ComponentType<RouteComponentProps<RouteParams<R>>>;
render?: (
params: RouteParams<R> & QueryParams<R>,
allProps: RouteComponentProps<RouteParams<R>>
) => React.ReactNode;
children?: (props: RouteComponentProps<RouteParams<R>>) => React.ReactNode;
}
// Simple typesafe ReactRoute `Route` component wrapper. Not nestable in ReactRouter `Switch` component.
// `render` prop.
// Renders only when matching.
// Similar to `ReactRouter Route#render`, but first argument is params/search_params hash:
// Explicitely access match params/search_params hash.
// <Match route={Routes.project.template()} render={({ projectId }) => <Project projectId={projectId} />} />
// Project -since it is a function- gets the first render arg. (i.e. params/search_params) mixed in the props.
// So the previous example can be written:
// <Match route={Routes.project.template()} render={Project} />
// Explicitely access ReactRouter props (second arg.).
// <Match route={Routes.project.template()} render={(_, { history, location, match, staticContext }) => <Project projectId={match.params.projectId} /> } />
// `component` prop.
// Renders only when matching.
// Identical to `ReactRouter Route#component`:
// Project gets ReactRouter props mixed in his props. `projectId` is accessible with `props.match.params.projectId`.
// <Match route={Routes.project.template()} component={Project} />
// `children` prop
// ALWAYS renders
// Identical to `ReactRouter Route#children`. Only the "function as a children" form is typesafe.
// <Match route={Routes.project.template()}>
// {({ history, location, match, staticContext }) =>
// match ? <Project projectId={match.params.projectId} /> : null}
// </Match>
const Match = <R extends Route<any, any>>({
route,
render,
component,
...routeProps
}: MatchProps<R>) => (
<RouteComponent
{...routeProps}
path={route.template()}
render={props =>
render
? render({ ...props.match.params, ...route.parse(props.location.search) }, props)
: component
? React.createElement(component, props)
: undefined
}
/>
);
export default Match;
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.