React Router Route Links

Makes route file paths in React Router v7+ config files clickable in VS Code.

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.

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/
• Only links to files that actually exist — a typo'd path simply won't underline, doubling as a lightweight sanity check
• Zero dependencies, no build step, 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