react-router-file-routes

What problem does it solve?

This Skill provides a concise reference guide for React Router v7 file-based routing conventions, helping developers understand how file names map to routes, how to define dynamic and nested routes, and how to implement special routing patterns in app/routes.

Core Features & Use Cases

• File naming conventions map to URL paths in app/routes, including index, nested, and dynamic routes.
• Support for dynamic segments using $param, optional segments with ?, pathless layouts using _ prefix, and splat routes with $. Also escaping special characters with bracket notation.
• Use Case: When starting a new React Router v7 project, organize route files to automatically create routes, including dynamic segments like /concerts/:city and /settings/profile.

Quick Start

Open your app's routes directory and apply the naming patterns shown in this guide. For example, create _index.tsx for the root, about.tsx for /about, concerts.tsx for the layout, concerts._index.tsx for /concerts, and concerts.$city.tsx for /concerts/:city.