react-router-file-routing
is an extension of React Router DOM that supports folder/file-based routing, similar to the App Router in Next.js. It automatically generates routes based on folder structures with page.tsx
files and allows easy management of dynamic and nested routes.
Before installing this library, make sure that react-router-dom and vite are already installed.
npm install react-router-file-routing react-router-dom
npm install -D vite
You must maintain the file structure in the format of src/pages/<route-name>/page.tsx
to match the route. Each page.tsx
file must have a default export.
src/
βββ pages/
β βββ page.tsx // corresponds to the '/' route
β βββ about/
β β βββ page.tsx // corresponds to the '/about' route
β βββ blog/
β β βββ page.tsx // corresponds to the '/blog' route
β β βββ [postId]/
β β βββ page.tsx // corresponds to the '/blog/:postId' dynamic route
β βββ dashboard/
β βββ page.tsx // corresponds to the '/dashboard' route
β βββ settings/
β βββ page.tsx // corresponds to the '/dashboard/settings' route
The FileRouter
component helps implement folder-based routing easily. By simply writing files according to the pages
directory structure, routing will be handled automatically.
// src/App.tsx
import React from 'react';
import { FileRouter } from 'react-router-file-routing';
function App() {
return <FileRouter />;
}
export default App;
Use brackets ([ ]) in folder names to define dynamic routes. For example, a folder named [postId]
will be interpreted as the route /blog/:postId
.
// src/pages/blog/[postId]/page.tsx
import React from 'react';
import { useParams } from 'react-router-dom';
export default function BlogPostPage() {
const { postId } = useParams<{ postId: string }>();
return <h1>Blog Post: {postId}</h1>;
}
You can define a Catch-all route by combining brackets ([ ]) and ... in folder names. For example, the folder /blog/[...slug]
will be interpreted as /blog/*
in React Router, and it will match multiple path segments.
Thus, paths like /blog/1
, /blog/1/2
, /blog/1/2/3
, etc., will all render the same page.tsx
.
Note: All Catch Routers have a lower priority than explicitly defined routes. This means that specific routes will be handled first, and the Catch-all route will handle any unmatched paths.
// src/pages/blog/[...slug]/page.tsx
import React from 'react';
import { useParams } from 'react-router-dom';
export default function BlogCatchAllPage() {
const params = useParams<{ '*': string }>(); // wildcard matched route
const slug = params['*'] ? params['*'].split('/') : []; // array of path segments
return (
<div>
<h1>Blog Catch-All Page</h1>
<p>Current Slug: {JSON.stringify(slug)}</p>
</div>
);
}
- Accessing
/blog/1
will result inslug = ['1']
. - Accessing
/blog/1/2
will result inslug = ['1', '2']
. - Accessing
/blog/1/2/3
will result inslug = ['1', '2', '3']
.
With Catch-all routes, you can manage multiple levels of paths with a single component and dynamically handle different segments.
You can add a layout.tsx
file inside a folder to apply a layout to the corresponding route. Layouts allow you to apply the same structure to nested routes.
// src/pages/dashboard/layout.tsx
import React from 'react';
import { Outlet } from 'react-router-dom';
export default function DashboardLayout() {
return (
<div>
<h1>Dashboard</h1>
<Outlet />
</div>
);
}
You can define a group route (or pathless route) using (folder-name)
format.
- Ex.1
- Folder: /pages/(root)/page.tsx, layout.tsx
- Path: "/"
- Ex.2
- Folder: /pages/home/(auth)/layout.tsx,page.tsx
- Path: "/home"
You can add an error.tsx
file inside the folder to perform processing for errors in that path.
For more details, see errorElement in React Router
// src/pages/error.tsx
import { useRouteError } from 'react-router-dom';
export default function HomeError() {
const error = useRouteError();
console.log(error);
return (
<div className={styles.error}>
<h1>Home Page Error</h1>
<p>test</p>
</div>
);
}
You can add a loading.tsx
file inside the folder to handle loading to that path.
For more information, see Suspense fallback in React
// src/pages/loading.tsx
export default function HomeLoading() {
return (
<div className={styles.wrapper}>
<h1>Home Page Title</h1>
<div className={styles.spinner} />
</div>
);
}
You can add a loader.ts
file inside the folder to handle loader to that path.
For more information, see Loader in React Router
// src/pages/loader.ts
export default async function rootLoader() {
const res = await fetch('https://swapi.dev/api/people');
return await res.json();
}
// src/pages/layout.tsx
const data = useLoaderData();
If you want to contribute to this project, follow these steps:
- Fork the repository.
- Create a new branch (
git checkout -b feature/my-feature
). - Commit your changes (
git commit -m 'Add some feature'
). - Push to the branch (
git push origin feature/my-feature
). - Create a Pull Request.
This project is licensed under the MIT License.
- React Router: https://reactrouter.com
- Next.js: https://nextjs.org
If you have any questions or issues, feel free to contact me at:
- Email: [email protected]