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