Skip to content
This repository has been archived by the owner on Dec 21, 2023. It is now read-only.

supachaidev/route-typed

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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>
      ))}
    </>
  );
};

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 100.0%