Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/amankumarsinhagithub/react-router-crash-course
🚀 React Router Guide for Beginners
https://github.com/amankumarsinhagithub/react-router-crash-course
beginner-friendly guide react react-router react-router-v6 reactjs reactrouter
Last synced: about 2 months ago
JSON representation
🚀 React Router Guide for Beginners
- Host: GitHub
- URL: https://github.com/amankumarsinhagithub/react-router-crash-course
- Owner: AmanKumarSinhaGitHub
- Created: 2024-01-07T18:32:07.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-08-25T11:37:56.000Z (4 months ago)
- Last Synced: 2024-10-13T00:18:33.550Z (3 months ago)
- Topics: beginner-friendly, guide, react, react-router, react-router-v6, reactjs, reactrouter
- Language: JavaScript
- Homepage: https://amankumarsinhagithub.github.io/React-Router-Crash-Course/
- Size: 190 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Router Crash Course
Welcome to the [React Router](https://reactrouter.com/en/main) Crash Course! This beginner-friendly guide will walk you through the process of setting up and using React Router in your Vite.js application. React Router is a powerful library designed to handle navigation in React applications.
#### [Live - Click Here to Open](https://amankumarsinhagithub.github.io/React-Router-Crash-Course/)
## Table of Contents
1. [Installation](#installation)
2. [Basic Usage](#basic-usage)
- [Link Component](#link-component)
- [NavLink Component](#navlink-component)
3. [Setting Up Routes](#setting-up-routes)
- [Main.jsx Configuration](#mainjsx-configuration)
- [Alternative Route Setup](#alternative-route-setup)
4. [Components and Layout](#components-and-layout)
- [Layout.jsx](#layoutjsx)
- [Header.jsx](#headerjsx)
- [Footer.jsx](#footerjsx)
5. [Custom URLs with Parameters](#custom-urls-with-parameters)
- [User.jsx](#userjsx)
6. [Fetching Data with React Router](#fetching-data-with-react-router)
- [GitHubUserData.jsx](#githubuserdatajsx)
7. [Conclusion](#conclusion)
## Installation
To begin, install the `react-router-dom` package using the following npm command:
```bash
npm install react-router-dom
```
## Basic Usage
### Link Component
The `Link` component serves as a navigation tool, replacing the traditional `` tag. Usage example:
```jsx
import { Link } from "react-router-dom";
Home;
```
### NavLink Component
The `NavLink` component extends the `Link` functionality, offering additional features such as handling the active state. Example usage:
```jsx
import { NavLink } from "react-router-dom";
`${isActive ? "text-orange-700" : "text-gray-700"}`
}
>
Home
;
```
## Setting Up Routes
### Main.jsx Configuration
Routes are configured in the `main.jsx` file. Below is an example using `createBrowserRouter`:
```jsx
import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider, createBrowserRouter } from "react-router-dom";
import Layout from "./Layout";
import Home from "./components/Home/Home";
import About from "./components/About/About";
import Contact from "./components/Contact/Contact";
import User from "./components/User/User";
import GitHubUserData, {
githubInfoLoader,
} from "./components/GitHubUserData/GitHubUserData";
const router = createBrowserRouter(
createRoutesFromElements(
}>
} />
} />
} />
}
loader={githubInfoLoader}
/>
} />
)
);
ReactDOM.createRoot(document.getElementById("root")).render(
);
```
### Alternative Route Setup
An alternative approach for setting up routes is using `createRoutesFromElements`. Example:
```jsx
const router = createBrowserRouter([
{
path: "/",
element: ,
children: [
{ path: "", element: },
{ path: "about", element: },
{ path: "contact", element: }
]
},
]);
```
## Components and Layout
Organize your app with separate components for different sections. Utilize a consistent layout structure for the header and footer, promoting a cohesive user experience.
### Layout.jsx
Example layout structure:
```jsx
import React from "react";
import Header from "./components/Header/Header";
import { Outlet } from "react-router-dom";
import Footer from "./components/Footer/Footer";
function Layout() {
return (
<>
>
);
}
export default Layout;
```
### Header.jsx
Navigation bar component for easy navigation:
```jsx
import React from "react";
import { NavLink } from "react-router-dom";
function Header() {
return (
-
`block py-2 pr-4 pl-3 duration-200 ${
isActive ? "text-orange-700" : "text-gray-700"
} border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 hover:text-orange-700 lg:p-0`
}
>
Home
{/* Add more NavLink components for other sections */}
);
}
export default Header;
```
### Footer.jsx
Footer component with navigation links:
```jsx
import React from "react";
import { Link } from "react-router-dom";
function Footer() {
return (
);
}
export default Footer;
```
## Custom URLs with Parameters
Creating dynamic URLs with parameters is a powerful feature of React Router. Here's an example using the `User.jsx` component:
### User.jsx
```jsx
import React from "react";
import { useParams } from "react-router-dom";
function User() {
const { userName } = useParams();
return (
<>
User Name: {userName}
>
);
}
export default User;
```
## Fetching Data with React Router
Fetching data asynchronously is a common requirement in modern web applications. React Router provides tools to achieve this. Here's an example using `GitHubUserData.jsx`:
### GitHubUserData.jsx
```jsx
import React from "react";
import { useLoaderData } from "react-router-dom";
function GitHubUserData() {
const data = useLoaderData();
return (
<>
Name : {data.name}
Github Followers : {data.followers}
Data is fetched from GitHub API
>
);
}
export default GitHubUserData;
export const githubInfoLoader = async () => {
try {
const response = await fetch(
"https://api.github.com/users/amankumarsinhagithub"
);
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json();
} catch (error) {
console.error("Error fetching GitHub data:", error);
throw error; // Rethrow the error to indicate that the data couldn't be loaded
}
};
```
## Conclusion
Congratulations! You've completed the React Router Crash Course. Feel free to explore and modify this example project to create your own dynamic and navigable React applications. Happy coding!