@edgefirst-dev/crud-routes NPM

React Router CRUD Helper

A helper to define CRUD routes in a React Router application using routes.ts.

Inspired by Rails resource routing.

Installation

bun add @edgefirst-dev/crud-routes

Usage

Import the crud helper in your app/routes.ts file.

import { crud } from "@edgefirst-dev/crud-routes";

Then you can use to to define routes in the exported array.

export default [...crud("users")] satisfies RouteConfig;

This will generate the following routes:

Path	File	ID	Used to
-	`./views/users/_layout.tsx`	users.layout	Layout of every users route
/users	`./views/users/index.tsx`	users.index	Display a list of all users
/users/new	`./views/users/new.tsx`	users.new	Form to create a new user
/users/:userId	`./views/users/show.tsx`	users.show	Display the details of a user
/users/:userId/edit	`./views/users/edit.tsx`	users.edit	Form to edit a user
/users/:userId/destroy	`./views/users/destroy.tsx`	users.destroy	Action to delete a user

Custom ID Prefix

You can also define a custom ID prefix for the generated routes.

export default [...crud("users", { idPrefix: "admin" })] satisfies RouteConfig;

This will generate the following routes:

Path	File	ID	Used to
-	`./views/users/_layout.tsx`	admin.layout	Layout of every users route
/users	`./views/users/index.tsx`	admin.index	Display a list of all users
/users/new	`./views/users/new.tsx`	admin.new	Form to create a new user
/users/:userId	`./views/users/show.tsx`	admin.show	Display the details of a user
/users/:userId/edit	`./views/users/edit.tsx`	admin.edit	Form to edit a user
/users/:userId/destroy	`./views/users/destroy.tsx`	admin.destroy	Action to delete a user

Nested Routes

You can also define nested routes using the React Router built-in helpers.

import { crud } from "@edgefirst-dev/crud-routes";
import { route } from "@react-router/dev/routes";

export default [
  ...crud("users", () => [
    // /users/profile
    route("profile", "./views/users/profile.tsx", { id: "users.profile" }),
  ]),
] satisfies RouteConfig;

This will generate the following routes:

Path	File	ID	Used to
-	`./views/users/_layout.tsx`	users.layout	Layout of every users route
/users	`./views/users/index.tsx`	users.index	Display a list of all users
/users/new	`./views/users/new.tsx`	users.new	Form to create a new user
/users/:userId	`./views/users/show.tsx`	users.show	Display the details of a user
/users/:userId/edit	`./views/users/edit.tsx`	users.edit	Form to edit a user
/users/:userId/destroy	`./views/users/destroy.tsx`	users.destroy	Action to delete a user
/users/profile	`./views/users/profile.tsx`	users.profile	Display the profile of a user

The nested route will be added to the layout of the CRUD.

Member Routes

A member route is a route attached to a specific resource. For example, in the resource users a member can be nested inside /users/:userId.

import { crud, route } from "@edgefirst-dev/crud-routes";

export default [
  ...crud("users", () => [
    route("profile", "./views/users/profile.tsx", {
      id: "users.profile",
      on: "member",
    }),
  ]),
] satisfies RouteConfig;

Here we're using the route helper exported by this package to define a new route. The on option is used to define the type of route. In this case, it's a member route.

A member route could also be another CRUD

import { crud } from "@edgefirst-dev/crud-routes";

export default [
  ...crud("users", () => [
    ...crud("posts", { on: "member" }), // /users/:userId/posts and other CRUD routes
  ]),
] satisfies RouteConfig;

Collection Routes

A collection route is a route attached to a specific resource. For example, in the resource users a collection can be nested inside /users.

import { crud, route } from "@edgefirst-dev/crud-routes";

export default [
  ...crud("users", () => [
    route("profile", "./views/users/profile.tsx", {
      id: "users.profile",
      on: "member",
    }),
  ]),
] satisfies RouteConfig;

Here we're using the route helper exported by this package to define a new route. The on option is used to define the type of route. In this case, it's a collection route.

A collection route could also be another CRUD

import { crud } from "@edgefirst-dev/crud-routes";

export default [
  ...crud("users", () => [
    ...crud("posts", { on: "collection" }), // /users/posts and other CRUD routes
  ]),
] satisfies RouteConfig;

Shallow Routes

Shallow routes allows you to nest a resource inside another resource, but limiting it to only the index and new routes. While the show, edit, and destroy routes are not nested, and with the same layout for both nested and non-nested routes.

import { crud } from "@edgefirst-dev/crud-routes";

export default [
  ...crud("users", () => [...crud("posts", { on: "shallow" })]),
] satisfies RouteConfig;

This will generate the following routes:

Path	File	ID	Used to
-	`./views/users/_layout.tsx`	users.layout	Layout of every users route
/users	`./views/users/index.tsx`	users.index	Display a list of all users
/users/new	`./views/users/new.tsx`	users.new	Form to create a new user
/users/:userId	`./views/users/show.tsx`	users.show	Display the details of a user
/users/:userId/edit	`./views/users/edit.tsx`	users.edit	Form to edit a user
/users/:userId/destroy	`./views/users/destroy.tsx`	users.destroy	Action to delete a user
/users/:userId/posts	`./views/posts/index.tsx`	users.posts	Display a list of all posts
/users/:userId/posts/new	`./views/posts/new.tsx`	users.posts.new	Form to create a new post
/posts/:postId	`./views/posts/show.tsx`	posts.show	Display the details of a post
/posts/:postId/edit	`./views/posts/edit.tsx`	posts.edit	Form to edit a post
/posts/:postId/destroy	`./views/posts/destroy.tsx`	posts.destroy	Action to delete a post

Note that shallow routes will not include a layout for the nested resource. This is because the layout is shared with the parent resource.

Author

Sergio Xalambrí

@react-router/dev inflected

1.0.0

7 months ago

0.0.3

7 months ago

0.0.2

7 months ago