https://github.com/obrm/react-router-6-tutorial-main
React Router Dom version 6 examples. Taken from John Smilga's React Course.
https://github.com/obrm/react-router-6-tutorial-main
react react-router-dom-v6
Last synced: about 2 months ago
JSON representation
React Router Dom version 6 examples. Taken from John Smilga's React Course.
- Host: GitHub
- URL: https://github.com/obrm/react-router-6-tutorial-main
- Owner: obrm
- Created: 2023-02-21T12:17:12.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-02-25T10:44:57.000Z (over 3 years ago)
- Last Synced: 2025-01-03T03:42:37.133Z (over 1 year ago)
- Topics: react, react-router-dom-v6
- Language: JavaScript
- Homepage: https://obrm-reouter-v6-demo.netlify.app
- Size: 282 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Router 6
## [Live site preview.](https://obrm-reouter-v6-demo.netlify.app)
#### React Course
[Taken from John Smilga's React Course](https://www.udemy.com/course/react-tutorial-and-projects-course/?referralCode=FEE6A921AF07E2563CEF)
#### Support
Find the App Useful? [You can always buy him a coffee](https://www.buymeacoffee.com/johnsmilga)
#### Docs
[React Router Docs](https://reactrouter.com/docs/en/v6/getting-started/overview)
#### Install
```sh
npm i react-router-dom
```
#### Index Routes
- Index routes render in the parent routes outlet at the parent route's path.
- Index routes match when a parent route matches but none of the other children match.
- Index routes are the default child route for a parent route.
- Index routes render when the user hasn't clicked one of the items in a navigation list yet.
- copy Home.js content
- SharedLayout.js
```js
import { Link, Outlet } from 'react-router-dom';
import Navbar from '../components/Navbar';
const SharedLayout = () => {
return (
<>
>
);
};
export default SharedLayout;
```
- Home.js
```js
const Home = () => {
return (
Home Page
);
};
export default Home;
```
- App.js
```js
function App() {
return (
}>
} />
} />
} />
} />
);
}
```
#### NavLink (style)
- StyledNavbar.js
```js
import { NavLink } from 'react-router-dom';
{
return { color: isActive ? 'red' : 'grey' };
}}
>
Home
;
```
#### NavLink (className)
- StyledNavbar.js
```js
(isActive ? 'link active' : 'link')}
>
Home
```
#### Reading URL Params
- App.js
```js
function App() {
return (
}>
} />
} />
} />
} />
} />
);
}
```
#### Single Product
- SingleProduct.js
```js
import { Link, useParams } from 'react-router-dom';
import products from '../data';
const SingleProduct = () => {
const { productId } = useParams();
return (
{productId}
back to products
);
};
export default SingleProduct;
```
#### Products Page
- Products.js
```js
import { Link } from 'react-router-dom';
import products from '../data';
const Products = () => {
return (
products
{products.map((product) => {
return (
{product.name}
more info
);
})}
);
};
export default Products;
```
#### Single Product
- SingleProduct.js
```js
import { Link, useParams } from 'react-router-dom';
import products from '../data';
const SingleProduct = () => {
const { productId } = useParams();
const product = products.find((product) => product.id === productId);
const { image, name } = product;
return (
{name}
back to products
);
};
export default SingleProduct;
```
#### useNavigate()
[ (?.) or Optional Chaining Explained](https://youtu.be/PuEGrylM1x8)
- App.js
```js
function App() {
const [user, setUser] = useState(null);
return (
}>
} />
} />
} />
} />
} />
} />
} />
);
}
```
- Login.js
```js
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
const Login = ({ setUser }) => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const navigate = useNavigate();
const handleSubmit = async (e) => {
e.preventDefault();
if (!name || !email) return;
setUser({ name: name, email: email });
navigate('/dashboard');
};
```
[ (?.) or Optional Chaining Explained](https://youtu.be/PuEGrylM1x8)
- Dashboard.js
```js
const Dashboard = ({ user }) => {
return (
Hello, {user?.name}
);
};
export default Dashboard;
```
#### Protected Route
- App.js
```js
}
/>
```
- ProtectedRoute.js
```js
import { Navigate } from 'react-router-dom';
const ProtectedRoute = ({ children, user }) => {
if (!user) {
return ;
}
return children;
};
export default ProtectedRoute;
```