https://github.com/chen-abudi/react-router-auth
This practice project focus on working with authentication in React.
https://github.com/chen-abudi/react-router-auth
css-modules expressjs javascript nodejs react react-router-v6
Last synced: 8 months ago
JSON representation
This practice project focus on working with authentication in React.
- Host: GitHub
- URL: https://github.com/chen-abudi/react-router-auth
- Owner: Chen-Abudi
- Created: 2024-05-16T15:27:16.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-21T21:21:46.000Z (over 1 year ago)
- Last Synced: 2024-12-30T20:27:37.909Z (9 months ago)
- Topics: css-modules, expressjs, javascript, nodejs, react, react-router-v6
- Language: JavaScript
- Homepage:
- Size: 220 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-router-auth
## 📣 Overview:
- Intro
- Tech Stack
- Techniques
- How to Get Started
- Additional Link
## 🔎 Intro:
This practice project focus on working with authentication in React.
It's the updated version of the [**_react-router-full_**](https://github.com/Chen-Abudi/react-router-full) project.
## 🧰 Tech Stack:
- React
- React Router Dom v6
- JavaScript
- NodeJS
- ExpressJS
- CSS Modules
## 🛠️ Techniques:
- Authentication
- **_Validate_** user input and **_Handle Validation Errors_**
- **_redirect_**: When returning or throwing responses in loaders and actions, we can use redirect to redirect to another route.
**`Note`**: It's recommended to use redirect in loaders and actions rather than useNavigate in your components when the redirect is in response to data.
- **`React Router Dom Hooks`**:
- **_useRouteLoaderData_**: Is a hook that efficiently manages loading states and data for specific routes. It optimizes rendering by fetching data only when needed, enhancing user experience.
- **_useRouteError_**: Is a hook that returns anything during an action, loader, or rendering inside of an **errorElement**.
- **_useNavigation_**: Is a hook that provides imperative navigation capabilities. It allows to programmatically navigate to different routes, pass state, and control navigation history, enhancing dynamic routing and user experience management.
---
## 🔗 Additional Link:
If you want to strengthen your knowledge and skills of **React, Redux, and more...** along the **Best Practices**, Feel free to check this course on Udemy by **`Maximilian Schwarzmüller`**:
## Visit the Course [👉🏽 **HERE !**](https://www.udemy.com/course/react-the-complete-guide-incl-redux/)
**_`Shoutout to Maximilian Schwarzmüller for the practice projects, all the lectures, the exercises, and the React course in Udemy. Mahalo, Thank you!`_** 🌺