React Router Route Links

Makes route file paths and API route strings in React Router v7+ (and Remix) projects clickable in VS Code — Ctrl+Click any of them to jump straight to the file that handles it.

The problem

VS Code's TypeScript server only supports go-to-definition on real import statements. But in a React Router v7+ routes.ts config, route modules are referenced as plain strings:

import { type RouteConfig, index, route } from "@react-router/dev/routes";

export default [
  index("routes/home.tsx"),
  route("about", "routes/about.tsx"),
] satisfies RouteConfig;

Those strings are inert to VS Code — no Ctrl+Click, no quick navigation. Every time you want to check what "routes/home.tsx" actually renders, you're manually hunting through folders.

What this extension does

It turns those route path strings into real, clickable links.

Hover over "routes/home.tsx" and it underlines like a link. Ctrl+Click (Cmd+Click on macOS) opens the file directly — no manual searching, no breaking your flow to go dig through the file tree.

It also works the other way: in any .ts/.js/.tsx/.jsx file, a string like "/api/someroute/:someId/some" becomes clickable too, as long as that path is actually defined in routes.ts (including nested route(), index(), layout(), and prefix() calls) — Ctrl+Click jumps straight to the module that handles it.

Install

Search "React Router Route Links" in the VS Code Extensions panel, or:

code --install-extension anparasan.routelinks

Features

• Works automatically in routes.ts / routes.js / routes.tsx / routes.jsx
• Resolves paths relative to the routes file's own directory (the app/ dir), with fallbacks to the workspace root, app/, and src/
• Also links matching route/API path strings (e.g. /api/users/:id) found in any .ts/.js/.tsx/.jsx file back to the route module that handles them
• Only links to files that actually exist — a typo'd path simply won't underline, doubling as a lightweight sanity check
• Zero runtime dependencies, lightweight

Settings

Customize which files and extensions are treated as route links via Settings → Extensions → React Router Route Links, or in settings.json:

Found a bug or have a request?

Open an issue on GitHub.

License

MIT © Anparasan T