VSCode React Router Snippets
Simple and Useful Snippets for React Router v7
Demo
| Configuring Routes |
Implement Page |
 |
 |
Snippets
| From |
Snippet |
Renders |
| Route |
rt |
route("pattern", "file"), |
| Index Route , Index |
irt , ind |
index("file"), |
| Nested Route , Nested |
nrt , nest |
route("parent", "file", [ ]), |
| Layout Route , Layout |
lrt , lay |
layout("file", [ ]), |
| Prefix Route , Prefix |
prt , pre |
...prefix("pattern", [ ]), |
| Import Route Type |
imp |
import type { Route } from "./+types/..."; |
| Loader |
ld |
export async function loader({ ... }) { } |
| Client Loader |
cld |
export async function clientLoader({ ... }) { } |
| Action |
ac |
export async function action({ ... }) { } |
| Client Action |
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 [ ]; } |
| shouldRevalidate |
srv |
export function shouldRevalidate(arg) { } |
| Route Component |
rc |
export default function Component() { } |
| ErrorBoundary |
eb |
export function ErrorBoundary() { } |
| HydrateFallback |
hf |
export function HydrateFallback() { } |
| |
