Git Product home page Git Product logo

react-router-v6-nested-routes's Introduction

# 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}
{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-router-v6-nested-routes

react-router-v6-nested-routes's People

Contributors

paulweezydesign avatar

Watchers

avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.