https://github.com/jaimin-bariya/react-routing-demo
Simple and Very Easy React Routing practice project
https://github.com/jaimin-bariya/react-routing-demo
Last synced: 8 months ago
JSON representation
Simple and Very Easy React Routing practice project
- Host: GitHub
- URL: https://github.com/jaimin-bariya/react-routing-demo
- Owner: jaimin-bariya
- Created: 2024-08-03T08:51:39.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-03T09:38:21.000Z (about 1 year ago)
- Last Synced: 2025-02-14T06:42:20.308Z (8 months ago)
- Language: JavaScript
- Size: 277 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Routing Demo 🚀
Welcome to my React Routing Demo project! This project showcases basic routing in a React application using React Router. Even though it seems very easy and basic to me, it serves as a great starting point for anyone new to React Router. Check it out [here](https://jaimin-bariya.github.io/React-Routing-Demo)!
## Project Overview 🎉
This project demonstrates:
- **Client-side Routing** using React Router.
- Handling nested routes.
- Using layout components to manage page structure.
- Custom error handling with an Error Page.
## Live Demo 🌐
You can see the live demo of this project [here](https://jaimin-bariya.github.io/React-Routing-Demo).
## Technologies and Libraries Used 📚
- **React**: For building user interfaces.
- **React Router**: For handling routing.
- **Vite**: For fast development and building.
- **gh-pages**: For deploying to GitHub Pages.
## Project Setup 🛠️
To run this project locally:
1. **Clone the repository:**
```sh
git clone https://github.com/jaimin-bariya/React-Routing-Demo.git
cd React-Routing-Demo
```
2. **Install dependencies:**
```sh
npm install
```
3. **Run the development server:**
```sh
npm run dev
```
4. **Build for production:**
```sh
npm run build
```
5. **Deploy to GitHub Pages:**
```sh
npm run deploy
```
## Folder Structure 📁
- **public/**: Contains the `index.html` and `404.html` for routing.
- **src/**: Contains the source code.
- **Components/**: Contains React components.
- **index.css**: Global styles.
- **main.jsx**: Entry point of the application.
## Routes Configuration 📍
```jsx
const router = createBrowserRouter(
createRoutesFromElements(
} errorElement={}>
} />
}>
} />
} />
} />
} />
} loader={githubFollowerInfo} />
),
{ basename: '/React-Routing-Demo' }
);
```
## License 📄
This project is licensed under the MIT License.
## Author 🧑💻
Created with ❤️ by JP.
Feel free to check out the project and provide feedback. Enjoy coding! 😃