https://github.com/kishanlalchoudhary/jobarouter-reactrouter

This is a simple project aimed to show the use of the React Router v6 library, which is a JavaScript library used in React applications to manage client and server-side routing.
https://github.com/kishanlalchoudhary/jobarouter-reactrouter

css javscript react react-router reactjs

Last synced: 2 months ago
JSON representation

This is a simple project aimed to show the use of the React Router v6 library, which is a JavaScript library used in React applications to manage client and server-side routing.

• Host: GitHub
• URL: https://github.com/kishanlalchoudhary/jobarouter-reactrouter
• Owner: kishanlalchoudhary
• Created: 2023-03-18T13:13:45.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-07-07T11:17:32.000Z (almost 3 years ago)
• Last Synced: 2025-05-18T10:36:45.622Z (about 1 year ago)
• Topics: css, javscript, react, react-router, reactjs
• Language: JavaScript
• Homepage: https://jobarouter-react-router.netlify.app/
• Size: 215 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Jobarouter - React Router

This is a simple project aimed to show the use of the React Router v6 library, which is a JavaScript library used in React applications to manage client and server-side routing.

## Features

- used createBrowserRouter, createRoutesFromElements, Route, and RouterProvider components to create a client-side routing system

- used Outlet component used to render child routes and useOutletContext hook to access information about the current matched route

- used Navlink and Link components to connect the various pages and parts of the website

- used loader prop and useLoaderData hook to load data asynchronously

- used useParams hook to access the parameters of the current URL, such as a dynamic ID in a route

- used errorElement prop to specify the element that should be rendered when an error is caught by the ErrorBoundary

- used useLocation Hook for implementation of Breadcrumbs to allow users to simply browse back to previous parts

- used Form component and action prop for handling form submissions

- used Navigate component and useNavigate hook to redirect the user based on certain conditions

- Custom 404 Page

## Screenshots

### Home Page

![Screenshot (229)](https://user-images.githubusercontent.com/107745828/232894469-78fa8e59-c861-42b5-b02d-7c630eb2e284.png)

### About Page

![Screenshot (230)](https://user-images.githubusercontent.com/107745828/232894581-678de6ea-98c8-494c-87f5-6368e6b16d39.png)

### Help Page

![Screenshot (231)](https://user-images.githubusercontent.com/107745828/232895456-9553a366-05f5-412c-9136-e9321d0ee7c3.png)

#### FAQ Section

![screencapture-jobarouter-react-router-netlify-app-help-faq-2023-04-19-01_47_22](https://user-images.githubusercontent.com/107745828/232895949-389e72ac-abe1-4ddb-95e6-1063f695cee2.png)

#### Contact Section

![Screenshot (233)](https://user-images.githubusercontent.com/107745828/232896018-6767561f-7c73-4123-9223-b4783b5cc3f1.png)

### Careers Page

![screencapture-jobarouter-react-router-netlify-app-careers-2023-04-19-01_52_06](https://user-images.githubusercontent.com/107745828/232896241-8a4b3b34-e098-4875-bb4e-dc2b11883367.png)

#### Careers Details Section

![Screenshot (235)](https://user-images.githubusercontent.com/107745828/232896505-1dcfdbec-4400-4a71-bcb6-0ed02b994da9.png)

### 404 Page

![Screenshot (236)](https://user-images.githubusercontent.com/107745828/232896927-f1ca288d-ffef-4b09-8fca-9fc22e2496ca.png)