route-typed
v1.1.0
Published
Prevent route errors by making the route params type safe.
Downloads
2
Readme
route-typed
Prevent route errors by making the route params type safe.
Install
# npm
npm install route-typed
# yarn
yarn add route-typed
Usage
// routes.ts
import { route } from 'route-typed';
export const routes = {
dashboard: route('/dashboard'),
user: {
list: route('/users'),
view: route('/users/:id'),
},
};
// or
import { createRoutes } from 'route-typed';
export const routes = createRoutes({
dashboard: '/dashboard',
user: {
list: '/users',
view: '/users/:userId',
},
});
routes.dashboard.route // => /dashboard
routes.dashboard({}) // => /dashboard
routes.user.list.route // => /users
routes.user.list({}) // => /users
routes.user.view.route // => /users/:userId
routes.user.view({ userId: 1 }) // => /users/1
// app.tsx
import { routes } from '~/routes';
const App = () => {
return (
<Routes>
<Route path={routes.dashboard.route} element={<Dashboard />} />
<Route path={routes.user.list.route} element={<Users />} />
<Route path={routes.user.view.route} element={<UserView />} />
</Routes>
);
};
// nav.tsx
import { routes } from '~/routes';
const NavComponent = () => {
return (
<>
<a href={routes.dashboard({})}>Dashboard</a>
<a href={routes.user.list({})}>Users</a>
</>
);
};
// user/list.tsx
import { routes } from '~/routes';
const users = [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
];
const Users = () => {
return (
<>
{users.map(user => (
<a href={routes.user.view({ id: user.id })}>{user.name}</a>
))}
</>
);
};