Automatic in your routes config
Works out of the box in routes.ts, routes.js, routes.tsx and routes.jsx. No config file, no import to add.
VS Code Marketplace · v0.1.0 · MIT
Your routes are just strings.
Make them links.
React Router Route Links turns the route file paths and API route strings
in your routes.ts config into real, clickable links.
Ctrl+Click any of them to jump straight to the file that
handles it — no manual searching, no breaking your flow.
- Zero runtime dependencies
- Works with Remix
- No configuration needed
1
import { type RouteConfig, index, route } from "@react-router/dev/routes";2
3
export default [4
index("routes/home.tsx"),5
route("about", "routes/about.tsx"),6
route("api/users/:id", "routes/api/user.tsx"),7
] satisfies RouteConfig;1
// literal route strings anywhere become links2
const PROFILE = "/api/users/123";3
const ABOUT = "/about";4
5
export async function load() {6
return fetch(PROFILE).then(r => r.json());7
}
app/routes/home.tsx
Go to definition
Ctrl+Click
any highlighted route to peek at the file it resolves to
The problem
VS Code can't see your routes
VS Code's TypeScript server only supports go-to-definition on real
import statements. But in a React Router v7 config, route
modules are referenced as plain strings — and plain strings are
inert to the editor.
Without Route Links
1
import { type RouteConfig, index, route } from "@react-router/dev/routes";2
3
export default [4
index("routes/home.tsx"),5
route("about", "routes/about.tsx"),6
] satisfies RouteConfig;No underline, no Ctrl+Click. You hunt through folders to find out what routes/home.tsx even renders.
With Route Links
1
import { type RouteConfig, index, route } from "@react-router/dev/routes";2
3
export default [4
index("routes/home.tsx"),5
route("about", "routes/about.tsx"),6
] satisfies RouteConfig;Hover to underline, Ctrl+Click to open the module instantly.
Features
Small extension, big difference
Everything it does, and nothing it doesn't.
Links API paths back to their handler
In any .ts, .js, .tsx or .jsx file, a string like "/api/users/:id" becomes clickable and jumps to the module that serves it.
Understands nested routes
Follows nested route(), index(), layout() and prefix() calls to work out the full path of every route.
Only links what exists
Targets are checked against the filesystem. A typo'd path simply won't underline — doubling as a lightweight sanity check on your config.
Path resolution that just works
Resolves relative to the routes file's own directory, with fallbacks to the workspace root, app/, src/app/ and src/.
Lightweight by design
Zero runtime dependencies, no bundler, no background watchers. Route maps are parsed once and cached against the config file's mtime.
How it works
Two kinds of links, one shortcut
Both are plain VS Code document links — hover to underline, Ctrl+Click (Cmd+Click on macOS) to open.
Link type 1
File links inside the routes config
A string literal that ends in a route file extension — like "routes/home.tsx" — becomes a link to that module. Resolution is relative to the routes file's own directory, with sensible fallbacks.
4
index("routes/home.tsx"),5
route("about", "routes/about.tsx"),Link type 2
Route pattern links anywhere else
Any string that looks like a URL path is matched against the routes parsed from your config. If it corresponds to a real route, it links straight to the module that handles it — dynamic segments included.
2
const PROFILE = "/api/users/123";3
const ABOUT = "/about";Route helpers it understands
route()
index()
layout()
prefix()
nested calls
dynamic segments :id
splat routes *
Settings
Tune it to your project
Edit under Settings → Extensions → React Router Route Links,
or drop the JSON straight into settings.json.
| Setting | Default | Description |
|---|---|---|
reactRouterRouteLinks.fileNames |
routes.ts, routes.js, routes.tsx, routes.jsx |
Which files get link treatment. |
reactRouterRouteLinks.extensions |
.tsx, .ts, .jsx, .js, .mdx, .md |
String suffixes treated as route file paths. |
settings.json
{
"reactRouterRouteLinks.fileNames": ["routes.ts", "routes.js"],
"reactRouterRouteLinks.extensions": [".tsx", ".ts", ".jsx", ".js"]
}Install
Up and running in seconds
From the Marketplace
Search "React Router Route Links" in the VS Code Extensions panel, or click below.
Open in MarketplaceFrom the terminal
Install it with a single command.
code --install-extension anparasan.routelinks
Requires VS Code 1.85.0 or newer. Once installed, open your
routes.ts and Ctrl+Click any route string.
FAQ
Questions, answered
Does it work with Remix?
Yes. Remix uses the same routes.ts config format, so the extension works there too.
Do I have to use a specific folder layout?
No. Paths are resolved relative to the routes file's own directory first, then the workspace root, app/, src/app/ and src/. If the routes config lives somewhere unusual, the extension also searches the workspace for it.
What happens when a path doesn't exist?
Nothing is linked. Only strings that resolve to a real file on disk become links, so typos simply don't underline.
Does it slow down my editor?
No. There are no runtime dependencies and no file watchers. Your routes config is parsed once and the result is cached until the file changes on disk.
Will it work inside template literals?
Dynamic template literals like `/users/${id}` are skipped, since their value isn't known statically. Static strings are linked as usual.
Is it open source?
Yes — MIT licensed. The full source is on GitHub, and contributions are welcome.
Stop hunting for route files
One install and every route in your React Router project becomes a link.