https://github.com/devjubayr/react_router_tutorial
https://github.com/devjubayr/react_router_tutorial
Last synced: 6 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/devjubayr/react_router_tutorial
- Owner: devjubayr
- Created: 2025-09-30T09:40:09.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-10-03T04:59:45.000Z (10 months ago)
- Last Synced: 2026-07-16T02:34:20.496Z (6 days ago)
- Language: JavaScript
- Size: 38.1 KB
- Stars: 3
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React router Tutorial Nodes
- This repository show what I learned from react router official tutorial.
- I've added what I learned from the tutorial.
[React Router v6 tutorial](https://reactrouter.com/6.30.1/start/tutorial)
## Important hooks
- **useRouteError:** useRouteError provides the error that was thrown. When the user navigates to routes that don't exist you'll get an error response with a "Not Found" statusText.
- **Form:** Unlike HTML form, react router form also work same but use client side routing.
Props:
1. _method_: "post", "put", "patch"
2. id:
3. _action_: "destroy" (this point to destroy like a link path to="destroy")
- **redirect:** to redirect from anywhere, Note that **useNavigate** only use in component and hooks
- **useNavigation:** to add global pending UI. _useNavigation returns the current navigation state: it can be one of "idle" | "submitting" | "loading"_
div start
className={
navigation.state === "loading" ? "loading" : ""
}
{Outlet here}
div close "
**useFetcher:** allows us to communicate with loaders and actions without causing a navigation.