Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eamonboyle/vite-folder-based-routing-example
This project demonstrates how to implement directory-based routing in a React application using react-router-dom and vite-plugin-pages.
https://github.com/eamonboyle/vite-folder-based-routing-example
react react-router-dom routing vite vite-plugin-pages
Last synced: 15 days ago
JSON representation
This project demonstrates how to implement directory-based routing in a React application using react-router-dom and vite-plugin-pages.
- Host: GitHub
- URL: https://github.com/eamonboyle/vite-folder-based-routing-example
- Owner: eamonboyle
- Created: 2024-09-17T13:39:07.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-09-17T14:09:39.000Z (about 2 months ago)
- Last Synced: 2024-10-16T18:57:54.612Z (30 days ago)
- Topics: react, react-router-dom, routing, vite, vite-plugin-pages
- Language: TypeScript
- Homepage:
- Size: 53.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Directory-Based Routing with React Router and Vite
This project demonstrates how to implement directory-based routing in a React application using react-router-dom and vite-plugin-pages.
## Tech stack
- React: A JavaScript library for building user interfaces
- [react-router-dom](https://reactrouter.com/en/main): Declarative routing for React applications
- Vite: Next-generation frontend tooling
- [vite-plugin-pages](https://github.com/hannoeru/vite-plugin-pages): File system based routing for Vite
- Tailwind CSS: A utility-first CSS framework for rapid UI development
- TypeScript: A typed superset of JavaScript that compiles to plain JavaScript
## Features
- Automatic route generation based on file structure
- Integration with React Router for seamless navigation
- Vite for fast development and building
## Setup
1. Install Vite & dependencies:
```bash
bun create vite@latest
bun install react-router-dom vite-plugin-pages
```
2. Configure vite.config.js:
```js
import Pages from 'vite-plugin-pages'
export default defineConfig({
plugins: [
react(),
Pages({
dirs: "src/app",
extensions: ["tsx", "jsx"],
}),
],
});
```
3. Set up your router in main.jsx or App.jsx:
```jsx
import { Suspense } from "react";
import { useRoutes } from "react-router-dom";
// @ts-expect-error Auto-generated routes
import routes from "~react-pages";
import Layout from "./components/layout";
function App() {
return (
Loading...}>{useRoutes(routes)}
);
}
export default App;
```
4. Add navigation component, with active states in src/components/navigation.tsx:
```jsx
import { NavLink } from "react-router-dom";
export default function Navigation() {
return (
-
(isActive ? "text-blue-500" : "hover:text-gray-300")}>
Home
-
(isActive ? "text-blue-500" : "hover:text-gray-300")}
>
About
-
(isActive ? "text-blue-500" : "hover:text-gray-300")}
>
Contact
-
(isActive ? "text-blue-500" : "hover:text-gray-300")}
>
Blog
);
}
```
5. Features to add
- [ ] Nested layout.tsx - Like NextJS
- [ ] Loading data (react-router-dom Loader)
## Directory Structure
```
src/
├── app/
│ ├── about/
│ │ └── index.tsx
│ ├── blog/
│ │ ├── [id].tsx
│ │ └── index.tsx
│ ├── contact/
│ │ └── index.tsx
│ └── index.tsx (Home Page)
├── components/
│ └── layout.tsx
│ └── navigation.tsx
└── main.tsx
```