# React Router 6 #### React Course [My React Course](https://www.udemy.com/course/react-tutorial-and-projects-course/?referralCode=FEE6A921AF07E2563CEF) #### Support Find the App Useful? [You can always buy me a coffee](https://www.buymeacoffee.com/johnsmilga) #### Run Complete Project - index.js ```js // import App from './App'; import App from './final/App'; ``` #### Docs [React Router Docs](https://reactrouter.com/docs/en/v6/getting-started/overview) #### Install ```sh npm install react-router-dom@6 ``` #### First Pages - App.js ```js import { BrowserRouter, Routes, Route } from 'react-router-dom'; function App() { return ( home page} />

testing

} /> ); } export default App; ``` #### Components - App.js ```js import { BrowserRouter, Routes, Route } from 'react-router-dom'; import Home from './pages/Home'; import About from './pages/About'; import Products from './pages/Products'; function App() { return ( } /> } /> } /> ); } export default App; ``` #### Links - Home.js, About.js ```js import { Link } from 'react-router-dom'; const Home = () => { return (

Home Page

About

); }; export default Home; ``` #### Error Page - App.js ```js function App() { return ( } /> } /> } /> } /> ); } ``` - Error.js ```js import { Link } from 'react-router-dom'; const Error = () => { return (

404

page not found

back home

); }; export default Error; ``` #### Nested Pages - will refactor few times - App.js ```js function App() { return ( }> } /> } /> } /> ); } ``` #### Shared Layout - Home.js ```js import { Link, Outlet } from 'react-router-dom'; const Home = () => { return (

Home Page

); }; export default Home; ``` #### Navbar - Navbar.js ```js import { Link } from 'react-router-dom'; const Navbar = () => { return ( Home About Products ); }; export default Navbar; ``` - Home.js ```js import { Link, Outlet } from 'react-router-dom'; import Navbar from '../components/Navbar'; const Home = () => { return ( <>

); }; export default Home; ``` #### 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; ``` # react-routing