https://github.com/ikoamu/react-router-snippets

Simple and Useful Snippets for React Router v7
https://github.com/ikoamu/react-router-snippets

react-router remix snippets vscode vscode-extension

Last synced: 2 months ago
JSON representation

Simple and Useful Snippets for React Router v7

• Host: GitHub
• URL: https://github.com/ikoamu/react-router-snippets
• Owner: ikoamu
• License: mit
• Created: 2025-04-08T11:27:13.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-04-08T15:32:03.000Z (about 1 year ago)
• Last Synced: 2025-04-12T20:53:59.172Z (about 1 year ago)
• Topics: react-router, remix, snippets, vscode, vscode-extension
• Homepage: https://marketplace.visualstudio.com/items/?itemName=ikoamu.react-router-snippets
• Size: 4.62 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# VSCode React Router Snippets

Simple and Useful Snippets for [React Router v7](https://reactrouter.com/)

## Demo

| Configuring Routes                                   | Implement Page                                |

| ---------------------------------------------------- | --------------------------------------------- |

| ![Configuring Routes](images/configuring-routes.gif) | ![ Implement Page](images/implement-page.gif) |

## Snippets

| From                                  | Snippet        | Renders                                           |

| ------------------------------------- | -------------- | ------------------------------------------------- |

| **R**ou**t**e                         | `rt`           | `route("pattern", "file"),`                       |

| **I**ndex **R**ou**t**e , **Ind**ex   | `irt` , `ind`  | `index("file"),`                                  |

| **N**ested **R**ou**t**e , **Nest**ed | `nrt` , `nest` | `route("parent", "file", [ ]),`                   |

| **L**ayout **R**ou**t**e , **Lay**out | `lrt` , `lay`  | `layout("file", [ ]),`                            |

| **P**refix **R**ou**t**e , **Pre**fix | `prt` , `pre`  | `...prefix("pattern", [ ]),`                      |

| **Imp**ort Route Type                 | `imp`          | `import type { Route } from "./+types/...";`      |

| **L**oa**d**er                        | `ld`           | `export async function loader({ ... }) { }`       |

| **C**lient **L**oa**d**er             | `cld`          | `export async function clientLoader({ ... }) { }` |

| **Ac**tion                            | `ac`           | `export async function action({ ... }) { }`       |

| **C**lient **Ac**tion                 | `cac`          | `export async function clientAction({ ... }) { }` |

| headers()                             | `headers`      | `export function headers() { return { }; }`       |

| Route handle                          | `handle`       | `export const handle = { };`                      |

| links()                               | `links`        | `export function links() { return [ ]; }`         |

| meta()                                | `meta`         | `export function meta() { return [ ]; }`          |

| **s**hould**R**e**v**alidate          | `srv`          | `export function shouldRevalidate(arg) { }`       |

| **R**oute **C**omponent               | `rc`           | `export default function Component() { }`         |

| **E**rror**B**oundary                 | `eb`           | `export function ErrorBoundary() { }`             |

| **H**ydrate**F**allback               | `hf`           | `export function HydrateFallback() { }`           |