Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/iamdipankarpaul/reactrouter_bynetninja
https://github.com/iamdipankarpaul/reactrouter_bynetninja
Last synced: 1 day ago
JSON representation
- Host: GitHub
- URL: https://github.com/iamdipankarpaul/reactrouter_bynetninja
- Owner: iamdipankarpaul
- Created: 2023-11-29T09:45:32.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-29T09:47:36.000Z (about 1 year ago)
- Last Synced: 2024-11-11T14:10:36.600Z (2 months ago)
- Language: JavaScript
- Size: 112 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Learning React Router | Net Ninja YT
This is a simple website that I created while learning React Router.
- [Folder structure](#folder-structure)
- [Overview](#overview)
- [Installation](#installation)
- [Contact Me](#contact-me)
## Folder structure
Demo data folder structure
```bash
📦data
┗ 📜db.json
```
src folder structure 👇
```bash
📦src
┣ 📂assets
┣ 📂components
┃ ┗ 📜BreadCrumbs.jsx
┣ 📂layouts
┃ ┣ 📜CareersLayout.jsx
┃ ┣ 📜HelpLayout.jsx
┃ ┣ 📜index.js
┃ ┗ 📜RootLayout.jsx
┣ 📂pages
┃ ┣ 📂careers
┃ ┃ ┣ 📜CareerDetails.jsx
┃ ┃ ┣ 📜CareerError.jsx
┃ ┃ ┣ 📜Careers.jsx
┃ ┃ ┗ 📜loaderFns.js
┃ ┣ 📂error
┃ ┃ ┗ 📜NotFound.jsx
┃ ┣ 📂help
┃ ┃ ┣ 📜Contact.jsx
┃ ┃ ┣ 📜contactActionFn.js
┃ ┃ ┗ 📜Faq.jsx
┃ ┣ 📜About.jsx
┃ ┣ 📜Home.jsx
┃ ┗ 📜index.js
┣ 📜App.jsx
┣ 📜index.css
┗ 📜main.jsx
```
## Overview
Starting with new way of routing using `createBrowserRouter()`, `createRoutesFromElements()` and `RouterProvider`.
I imported the necessary components, layouts, loader functions, and action handlers from various files and sets up the routes using the `createRoutesFromElements` function. The routes are nested within layout components and have associated loaders and error elements. The router configuration is then passed to the `RouterProvider` component, which is rendered by the App component.
- React components and layouts imported from different files.
- Loader functions and action handlers imported from different files.
## Installation
- Clone the GitHub repository.
- Install the dependencies
```bash
npm install
```
- Run the following command
```bash
npm run dev
```
- Your application will start at
- Now you can go and visit the website.
## Contact Me
Dipankar Paul |