https://github.com/kaplanh/react-router-dom-example
https://github.com/kaplanh/react-router-dom-example
axios-react bootstrap5 conditional-rendering navigate-component navlink-element nested-routes private-routing react-router-dom reaxt useeffect-hook uselocation-hook usenavigate-hook useparams-hook usestate-hook
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/kaplanh/react-router-dom-example
- Owner: kaplanh
- Created: 2024-02-21T00:31:26.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-02-21T15:26:15.000Z (almost 2 years ago)
- Last Synced: 2025-01-09T07:47:46.933Z (12 months ago)
- Topics: axios-react, bootstrap5, conditional-rendering, navigate-component, navlink-element, nested-routes, private-routing, react-router-dom, reaxt, useeffect-hook, uselocation-hook, usenavigate-hook, useparams-hook, usestate-hook
- Language: JavaScript
- Homepage: https://react-router-dom-example.vercel.app
- Size: 426 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React-Router-Dom Example(with Axios)
[:point_right: Click here to see on browser](https://react-router-dom-example.vercel.app/)
---
| **What's used in this app ?** | **How use third party libraries** | **Author** |
| --------------------------------------------------------------------------------------- | --------------------------------- | -------------------------------------------------------------------------------- |
| [React-Router-Dom](https://reactrouter.com/en/main/start/overview) | npm i / yarn add react-router-dom | [Take a look at my portfolio](https://kaplanh.github.io/Portfolio_with_CssFlex/) |
| [useEfect() Hook componentDidUpdate()](https://react.dev/learn#using-hooks) | | [Visit me on Linkedin](https://www.linkedin.com/in/kaplan-h/) |
| [useState() Hook](https://react.dev/learn#using-hooks) | | |
| [CRUD OPERATIONS with axios API](https://www.npmjs.com/package/axios#axios-api) | npm i/yarn add axios | |
| [react-events](https://react.dev/learn#responding-to-events) | | |
| [Bootstrap](https://getbootstrap.com/docs/5.3/getting-started/introduction/) | npm i / yarn add bootstrap | |
| [React-icons](https://react-icons.github.io/react-icons/) | npm i / yarn add react-icons | |
| [lifting state up](https://react.dev/learn/sharing-state-between-components) | | |
| [props-drilling](https://react.dev/learn#sharing-data-between-components) | | |
| [Semantic-Commits](https://gist.github.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716) | | |
| Deploy with [Vercel](https://vercel.com/kaplanh) | | |
| API [reqres](https://reqres.in/api/users) | | |
---
## How To Run This Project π
### π» Install React π
```bash
yarn create react-app . or npx create-react-app .
```
### π» Install Sass π
```bash
yarn add sass or npm i sass
```
## π΄ Delete these files and delete the importsπ
- App.test.js
- reportWebVitals.js
- setupTests.js
- favicon.ico
- logo192.png
- logo512.png
- manifest.json
- robots.txt
### π» Start the project π
```bash
yarn start or npm start
```
OR
- Clone the Repo
```sh
git clone
```
- Install NPM packages
```sh
npm install or yarn
```
- Run the project
```sh
npm start or yarn start
```
- Open the project on your browser
```sh
http://localhost:3000/
```
- ### Enjoy! π
---
## Project Skeleton
```
react-router-dom-example(folder)
|
|----public (folder)
β βββ index.html
|----src (folder)
| |--- components (folder)
β β βββ About.jsx
β β βββ Courses.jsx
β β βββ Footer.jsx
β β βββ Nav.jsx
β β
| |--- img (folder)
β β
β |--- pages (folder)
| | βββ Aws.jsx
| | βββ Contact.jsx
| | βββ Fulstack.jsx
| | βββ Home.jsx
| | βββ LogΔ±n.jsx
| | βββ Next.jsx
| | βββ NotFound.jsx
| | βββ Paths.jsx
| | βββ People.jsx
| | βββ PersonDetaΔ±l.jsx
| | βββ React.jsx
| |
| |--- router (folder)
β β βββ AppRouter.jsx
β β βββ PrivateRouter.jsx
| |
| |
β β--- App.js
β β--- data.js.js
β |--- index.js
β |--- index.css
β
β
|ββ .gitignore
|ββ package-lock.json
βββ package.json
|ββ README.md
|ββ yarn.lock
```
---
### At the end of the project, the following topics are to be covered;
- React-Router-Dom
```jsx
//index.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "bootstrap/dist/css/bootstrap.min.css";
import "./index.css";
import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
);
//App.jsx
import AppRouter from "./router/AppRouter";
function App() {
return (
<>
>
);
}
export default App;
//router/AppRouter.jsx
import Nav from "../components/Nav";
import { Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import Paths from "../pages/Paths";
import People from "../pages/People";
import PersonDetail from "../pages/PersonDetail";
import Contact from "../pages/Contact";
import NotFound from "../pages/NotFound";
import Footer from "../components/Footer";
import Fullstack from "../pages/Fullstack";
import Aws from "../pages/Aws";
import Next from "../pages/Next";
import React from "../pages/React";
import PrivateRouter from "./PrivateRouter";
import Login from "../pages/Login";
import { useState } from "react";
const AppRouter = () => {
const [user, setUser] = useState(
JSON.parse(sessionStorage.getItem("user")) || false
);
return (
} />
}>
} />
}>
} />
} />
} />
}>
} />
} />
} />
} />
} />
);
};
export default AppRouter;
```
- Nested Router
```jsx
import Nav from "../components/Nav";
import { Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import Paths from "../pages/Paths";
import People from "../pages/People";
import PersonDetail from "../pages/PersonDetail";
import Contact from "../pages/Contact";
import NotFound from "../pages/NotFound";
import Footer from "../components/Footer";
import Fullstack from "../pages/Fullstack";
import Aws from "../pages/Aws";
import Next from "../pages/Next";
import React from "../pages/React";
import PrivateRouter from "./PrivateRouter";
import Login from "../pages/Login";
import { useState } from "react";
const AppRouter = () => {
const [user, setUser] = useState(
JSON.parse(sessionStorage.getItem("user")) || false
);
return (
} />
}>
} />
}>
} />
} />
} />
}>
} />
} />
} />
} />
} />
);
};
export default AppRouter;
```
- Private Router
```jsx
//router/PrivateRouter
import React from "react";
import { Navigate, Outlet } from "react-router-dom";
//? Navigate componenti sayfada gorulmeyen ve programsal olarak bir linkin
//? bir baska linke yonledirilmesi icin kullanilabilir. (v5 -> Redirect)
//? Navigate, Component seviyesi Routing icin kullanilir.
const PrivateRouter = ({ user }) => {
// const user = true;
return user ? : ;
};
export default PrivateRouter;
```
- Login& Logout
```jsx
//Nav.jsx
import { NavLink } from "react-router-dom";
import logo from "../img/logo.png";
function Nav({ user, setUser }) {
return (
-
Home
-
People
-
Paths
-
Contact
-
{user ? (
setUser(false)}
>
Logout
) : (
Login
)}
);
}
export default Nav;
```
- useNavigate & useParams & useLocaation
```jsx
//People.jsx
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
const People = () => {
const [people, setPeople] = useState([]);
let navigate=useNavigate()
const getPeople = () => {
fetch("https://reqres.in/api/users")
.then((res) => res.json())
.then((data) => setPeople(data.data))
.catch((err) => console.log(err));
};
useEffect(() => {
getPeople();
}, []);
return (
PEOPLE LIST
{people?.map((person) => {
const { id, first_name, last_name, avatar } = person;
return (
navigate(`${id}`, { state: person })}
>
{first_name} {last_name}
);
})}
);
};
export default People;
//PeopleDetails.jsx
import React, { useEffect, useState } from "react";
// import { useLocation} from "react-router-dom";
import {useNavigate, useParams } from "react-router-dom";
import axios from "axios";
import NotFound from "./NotFound";
import spinner from "../img/Spinner-2.gif";
const PersonDetail = () => {
//! navigate ile gonderilen state'i yakalamak icin useLocation Hook'u kullanilabilir.
//! Bu durumda veri, state ile geldigi icin yeniden fetch yapilmasina gerek kalmaz
// let { state: person } = useLocation();
let navigate = useNavigate();
// console.log(person);
//! Linkteki parametreyi almak icin useParams Hook'u kullanilabilir.
let { id } = useParams();
// console.log({ id });
const [person, setPerson] = useState({});
const [error, setError] = useState(false);
const [loading, setLoading] = useState(true);
// const getPerson = () => {
// axios(`https://reqres.in/api/users/${id}`)
// .then((res) => setPerson(res.data.data))
// .catch((err) => {
// setError(true);
// console.log(err);
// })
// .finally(() => setLoading(false));
// };
// useEffect(() => {
// getPerson();
// // eslint-disable-next-line
// // !warningden kurtulmak icin ya bunu ekleyebilirsin yada 2.yol seklinde yazabilirsin
// }, []);
// !2.yol id her degistiginde getPerson fonk calistir
useEffect(() => {
const getPerson = () => {
axios(`https://reqres.in/api/users/${id}`)
.then((res) => setPerson(res.data.data))
.catch((err) => {
setError(true);
console.log(err);
})
.finally(() => setLoading(false));
};
getPerson();
}, [id]);
if (error) {
return ;
} else if (loading) {
return (
);
}
return (
{person?.first_name} {person?.last_name}
{person?.email}
navigate("/")}
className="btn btn-success me-2"
>
Go Home
navigate(-1)}
className="btn btn-warning"
>
Go Back
);
};
export default PersonDetail;
```
- NavLink & Link & useNavigate() & Navigate
- Semantic Commit Messages
See how a minor change to your commit message style can make you a better programmer.
Format: ():
is optional
- Example
```
feat: add hat wobble
^--^ ^------------^
| |
| +-> Summary in present tense.
|
+-------> Type: chore, docs, feat, fix, refactor, style, or test.
```
- More Examples:
- `feat`: (new feature for the user, not a new feature for build script)
- `fix`: (bug fix for the user, not a fix to a build script)
- `docs`: (changes to the documentation)
- `style`: (formatting, missing semi colons, etc; no production code change)
- `refactor`: (refactoring production code, eg. renaming a variable)
- `test`: (adding missing tests, refactoring tests; no production code change)
- `chore`: (updating grunt tasks etc; no production code change)
---
## Feedback and Collaboration
I value your feedback and suggestions. If you have any comments, questions, or ideas for improvement regarding this project or any of my other projects, please don't hesitate to reach out.
I'm always open to collaboration and welcome the opportunity to work on exciting projects together.
Thank you for visiting my project. I hope you have a wonderful experience exploring it, and I look forward to connecting with you soon!
β Happy Coding β