Next.js has popularized the idea of file-system routing in the front-end space, though not a particularly new idea, it’s well adopted by the community and other meta frameworks (e.g. Remix.js). Next.js achieved this with its own router (i.e.
next/router) which is inseparable from the framework itself. However, for apps built with React Router and Webpack, how can we have something similar? A quick answer is to reverse engineer it. The end state is something everyone is already familiar with
import { Routes, Route } from "react-router-dom"; import Home from '../pages/index' import About from '../pages/about' import NoMatch from '../pages/404' <Routes> <Route path="/"> <Route index element={<Home />} /> <Route path="about" element={<About />} /> <Route path="*" element={<NoMatch />} /> </Route> </Routes>
We may just create it, and it’s in fact what we’ve done before, but it defeats the whole purpose of having the file-system based routes in the first place. Hence, it should be auto generated from a bunch of route files that may looks like this
pages/ index.tsx about.tsx 404.tsx
Then the question becomes how can we auto generate the above routes tree from individual route file that follows specific naming conventions? does exactly this.
vite-plugin-pages
hannoeru • Updated Jun 2, 2024
It’s great that we don’t have to reinvent the wheel. However, isn’t it a plugin designed for Vite, is it possible to port a Vite plugin to Webpack? 👋 to .
unplugin
unjs • Updated Jun 3, 2024
In short, we can get a Webpack plugin that supports file-system based routing with React Router by remixing two existing solutions like 🔝.
Feel free to poke around with the idea, or roll out your own solutions 🥂