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() { } |
| |