└── react-router-demo ├── .gitignore ├── README.md ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.css ├── App.js ├── App.test.js ├── components │ ├── About.js │ ├── Admin.js │ ├── FeaturedProducts.js │ ├── Home.js │ ├── Login.js │ ├── Navbar.js │ ├── NewProducts.js │ ├── NoMatch.js │ ├── OrderSummary.js │ ├── Products.js │ ├── Profile.js │ ├── RequireAuth.js │ ├── UserDetails.js │ ├── Users.js │ └── auth.js ├── index.css ├── index.js ├── logo.svg ├── reportWebVitals.js └── setupTests.js └── yarn.lock /react-router-demo/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /react-router-demo/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `yarn start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.\ 15 | You will also see any lint errors in the console. 16 | 17 | ### `yarn test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `yarn build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `yarn eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 35 | 36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 39 | 40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `yarn build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /react-router-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-router-demo", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.4", 7 | "@testing-library/react": "^11.1.0", 8 | "@testing-library/user-event": "^12.1.10", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-router-dom": "6", 12 | "react-scripts": "4.0.3", 13 | "web-vitals": "^1.0.1" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /react-router-demo/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gopinav/React-Router-Tutorials/f24b73549db64df971ea50aa1502c09e26ec2d46/react-router-demo/public/favicon.ico -------------------------------------------------------------------------------- /react-router-demo/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /react-router-demo/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gopinav/React-Router-Tutorials/f24b73549db64df971ea50aa1502c09e26ec2d46/react-router-demo/public/logo192.png -------------------------------------------------------------------------------- /react-router-demo/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gopinav/React-Router-Tutorials/f24b73549db64df971ea50aa1502c09e26ec2d46/react-router-demo/public/logo512.png -------------------------------------------------------------------------------- /react-router-demo/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /react-router-demo/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react-router-demo/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /react-router-demo/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Routes, Route } from 'react-router-dom' 3 | import { Home } from './components/Home' 4 | // import { About } from './components/About' 5 | import { Navbar } from './components/Navbar' 6 | import { OrderSummary } from './components/OrderSummary' 7 | import { NewProducts } from './components/NewProducts' 8 | import { FeaturedProducts } from './components/FeaturedProducts' 9 | import { Products } from './components/Products' 10 | import { NoMatch } from './components/NoMatch' 11 | import { Users } from './components/Users' 12 | import { UserDetails } from './components/UserDetails' 13 | import { Admin } from './components/Admin' 14 | import { AuthProvider } from './components/auth' 15 | import { Login } from './components/Login' 16 | import { Profile } from './components/Profile' 17 | import { RequireAuth } from './components/RequireAuth' 18 | 19 | const LazyAbout = React.lazy(() => import('./components/About')) 20 | 21 | function App() { 22 | return ( 23 | 24 | 25 | 26 | } /> 27 | } /> 28 | 32 | 33 | 34 | } 35 | /> 36 | 40 | 41 | 42 | } 43 | /> 44 | } /> 45 | }> 46 | } /> 47 | } /> 48 | } /> 49 | 50 | }> 51 | } /> 52 | } /> 53 | 54 | 55 | } /> 56 | 57 | 58 | ) 59 | } 60 | 61 | export default App 62 | -------------------------------------------------------------------------------- /react-router-demo/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /react-router-demo/src/components/About.js: -------------------------------------------------------------------------------- 1 | const About = () => { 2 | return ( 3 |
4 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac posuere 5 | turpis. Duis et blandit ante. Duis vitae fringilla risus. Donec pretium 6 | tincidunt tellus, non ultrices magna pellentesque sit amet. Nunc ornare 7 | enim ante, sit amet imperdiet nisi sollicitudin eget. Mauris condimentum 8 | enim eu nisi rhoncus dapibus. Proin vestibulum cursus lorem. Curabitur leo 9 | orci, hendrerit non tellus ut, rhoncus pretium arcu. Donec luctus porta 10 | hendrerit. Suspendisse iaculis molestie neque a tempor. Donec scelerisque 11 | mauris ut felis semper eleifend. Aenean id dapibus ante. Pellentesque sed 12 | purus elementum, feugiat tellus id, condimentum erat. Proin sapien sem, 13 | lobortis id nunc nec, euismod congue sem. Proin a ornare diam, quis 14 | accumsan nunc. Aliquam scelerisque malesuada vestibulum. Morbi nec 15 | venenatis leo, quis laoreet tellus. Suspendisse potenti. Nullam libero 16 | augue, eleifend id nibh ut, ullamcorper cursus odio. Suspendisse volutpat 17 | sagittis ipsum, et facilisis elit. Vivamus ornare justo nunc, quis 18 | pulvinar eros pellentesque eu. Mauris in aliquet metus. Cras vitae dui 19 | rutrum, blandit felis suscipit, tincidunt diam. Proin non est posuere, 20 | euismod est non, molestie libero. Class aptent taciti sociosqu ad litora 21 | torquent per conubia nostra, per inceptos himenaeos. Vestibulum nec turpis 22 | laoreet, vehicula dui in, efficitur enim. Mauris dignissim augue nisl. 23 | Fusce vitae metus eu mi interdum sagittis at non tellus. Curabitur 24 | tristique imperdiet vestibulum. Vestibulum fermentum magna maximus, 25 | ultricies eros et, vulputate augue. Quisque maximus in mi non feugiat. 26 | Integer congue sed nisi id malesuada. Vestibulum sollicitudin velit in 27 | risus lobortis, vitae ullamcorper justo dignissim. Proin elementum porta 28 | egestas. Aenean sit amet est tellus. Donec quis bibendum odio, non 29 | sagittis sem. Ut hendrerit nunc vel est tempus rhoncus. In vitae risus 30 | euismod, ullamcorper est sed, tristique augue. Morbi nulla ligula, 31 | porttitor ut massa vel, aliquam convallis dui. Vivamus augue sem, molestie 32 | eget massa ut, tincidunt laoreet dolor. Phasellus lacinia est lobortis 33 | neque convallis placerat. Vivamus varius dolor vitae justo imperdiet, sit 34 | amet auctor justo tincidunt. Vestibulum ultricies lacus eget velit 35 | faucibus laoreet. Ut faucibus id mi nec pharetra. Mauris id mauris eget 36 | purus tempus ullamcorper ac vitae mauris. Aenean vestibulum interdum 37 | lobortis. Curabitur porttitor, neque nec fermentum bibendum, urna magna 38 | dictum mauris, et fermentum nulla tortor finibus leo. Nullam ac sapien 39 | quis libero scelerisque finibus. Praesent pharetra porta posuere. Donec 40 | fringilla dui a purus rutrum, ut tincidunt nunc vestibulum. Vestibulum 41 | sagittis sapien justo, vel accumsan sem viverra at. Donec vestibulum 42 | dignissim neque ornare volutpat. Integer sagittis feugiat varius. Sed sed 43 | hendrerit orci. Class aptent taciti sociosqu ad litora torquent per 44 | conubia nostra, per inceptos himenaeos. Quisque placerat est non lacus 45 | faucibus posuere. Pellentesque et dui viverra, rhoncus turpis at, vehicula 46 | justo. Etiam odio massa, eleifend sit amet eros sit amet, tincidunt 47 | pretium erat. In pretium tellus mi, non euismod metus ullamcorper sit 48 | amet. Praesent urna tellus, aliquam eget ullamcorper a, mollis 49 | pellentesque velit. Nunc at hendrerit turpis. Nunc vehicula tristique 50 | diam, et ultricies velit pellentesque id. Fusce enim nibh, sagittis ac 51 | nisl ac, sodales dignissim leo. Proin a facilisis ante. Nulla facilisi. 52 | Cras quis quam ac libero convallis suscipit. Sed eget orci nec augue 53 | tempus sodales quis eu ligula. Pellentesque eu ligula nibh. Quisque 54 | pellentesque eros at tincidunt scelerisque. Curabitur volutpat odio quis 55 | lacus tempor consectetur. Aenean tempor luctus dolor, ut sagittis quam 56 | lobortis id. In pretium ipsum lectus, id tristique orci vulputate 57 | interdum. In hac habitasse platea dictumst. Integer sed mollis dui. Morbi 58 | ultricies dui nec hendrerit vulputate. Morbi venenatis, diam vel volutpat 59 | pulvinar, libero libero efficitur nisl, vitae interdum turpis quam nec 60 | nisi. Etiam vulputate tortor ut augue sagittis vestibulum. Aliquam arcu 61 | orci, rhoncus vel egestas at, feugiat vel enim. Nulla iaculis felis eget 62 | odio rhoncus cursus. Aliquam dictum commodo est, nec tincidunt sapien 63 | sodales id. Integer interdum, ligula vel ultrices lacinia, dolor tellus 64 | porta est, vel ullamcorper est justo sit amet tortor. Nullam gravida ante 65 | auctor lectus molestie, nec tincidunt libero interdum. In ac turpis a elit 66 | ullamcorper tincidunt. Vestibulum ante ipsum primis in faucibus orci 67 | luctus et ultrices posuere cubilia curae; Maecenas non purus condimentum, 68 | pharetra lorem id, accumsan erat. Quisque volutpat accumsan felis quis 69 | porttitor. Praesent sit amet fringilla mauris, ornare mattis mi. Ut 70 | lacinia bibendum arcu, sit amet iaculis nisl bibendum vel. Morbi ultrices, 71 | quam eu auctor semper, erat tortor fringilla mauris, sit amet laoreet 72 | tortor nulla id leo. Nullam justo massa, bibendum id elit vel, volutpat 73 | consectetur velit. Sed sed vehicula mauris. Etiam metus justo, commodo vel 74 | egestas et, feugiat eu ipsum. Nulla ac diam in ligula ultricies 75 | ullamcorper et eu dolor. Sed accumsan neque a diam vestibulum, vitae 76 | dignissim orci accumsan. Nulla eleifend iaculis ante vel porta. Phasellus 77 | sed ipsum at mauris condimentum commodo vel ut massa. Nam sed consequat 78 | tellus, vel fringilla est. Vivamus et blandit mauris. Pellentesque 79 | sagittis lorem nec eros tincidunt sagittis eget et augue. Sed convallis 80 | arcu ultricies lectus iaculis, eget pharetra mauris tincidunt. Nam 81 | imperdiet sem id eleifend pretium. Maecenas vel lacinia lorem. Cras 82 | tincidunt quam placerat eros bibendum, nec luctus risus aliquet. Nulla id 83 | tempus turpis, quis porttitor felis. Vivamus tempus eget nisl quis 84 | bibendum. Etiam nisl nunc, venenatis nec magna nec, maximus iaculis mi. 85 | Sed ornare tellus turpis, eget ultrices lectus varius sit amet. Nam 86 | tincidunt finibus vulputate. Praesent ac lorem dolor. Pellentesque dictum 87 | dictum ultricies. Curabitur euismod augue mauris. Fusce dignissim sapien 88 | cursus sapien congue, ac efficitur diam lobortis. Sed ac felis justo. 89 | Etiam eros nibh, interdum quis lobortis vitae, dignissim vitae nunc. Donec 90 | et mi ac nisl auctor consectetur sit amet eget ipsum. Cras urna justo, 91 | luctus sed orci sed, dapibus fringilla ligula. Praesent quis libero in 92 | tortor facilisis rutrum. Mauris ultrices ut nibh sit amet lacinia. 93 | Phasellus vitae urna quis mi elementum pretium. Duis vel gravida libero, 94 | in eleifend ante. Sed volutpat finibus tellus, sed fermentum metus luctus 95 | blandit. Duis eleifend dapibus tempus. Nunc sed euismod odio, non 96 | efficitur justo. Sed hendrerit tincidunt scelerisque. Nam condimentum 97 | faucibus nunc, sit amet lobortis metus dictum sit amet. Donec pretium 98 | aliquet arcu, nec tincidunt odio tempus quis. Nullam est velit, volutpat 99 | eget velit non, sagittis condimentum orci. Vestibulum orci purus, 100 | malesuada sed leo vitae, egestas tristique tellus. Vestibulum sed 101 | consectetur ipsum. Duis tempus quam a semper sodales. Vivamus laoreet 102 | ultrices maximus. Duis sit amet lacus vitae est tincidunt ullamcorper vel 103 | id sapien. Proin in purus dui. Nunc vel egestas augue. Integer dapibus 104 | neque nisi, ut semper nisl ultrices ut. Praesent dignissim sapien 105 | tristique ligula venenatis imperdiet. Nulla quis orci faucibus, porta 106 | tortor dictum, luctus metus. Vivamus sit amet justo urna. Praesent 107 | convallis laoreet elit, sed faucibus lectus tempor in. Quisque 108 | condimentum, nisi consequat vestibulum ullamcorper, velit massa elementum 109 | neque, ut pulvinar justo nisi at felis. Donec pharetra, ex eu congue 110 | tempor, magna odio volutpat ante, sed lobortis dui turpis nec tellus. 111 | Mauris mi ex, aliquam quis pulvinar ut, suscipit sed ex. Donec urna 112 | ligula, scelerisque ac justo et, cursus fringilla quam. Aenean vestibulum 113 | justo in mi auctor, sed cursus leo condimentum. Donec dictum imperdiet 114 | enim, quis iaculis ipsum tincidunt quis. Mauris mattis neque at libero 115 | rutrum commodo. Mauris quis congue tellus. Quisque pulvinar et neque sed 116 | eleifend. Suspendisse potenti. Vivamus iaculis tristique efficitur. Nulla 117 | quis dui quis orci maximus elementum et non neque. Sed tempus mauris 118 | risus, eget posuere arcu volutpat in. Cras id elit ullamcorper, porta dui 119 | vel, egestas libero. Sed arcu augue, eleifend vel finibus sed, dignissim a 120 | massa. Praesent quis orci eget justo pellentesque elementum. Nullam 121 | fringilla ex sit amet risus lobortis bibendum. Vivamus aliquet venenatis 122 | leo, vel finibus elit facilisis vitae. Morbi efficitur lorem velit, eu 123 | faucibus mi vulputate ac. In nec egestas massa, nec pellentesque ligula. 124 | Aliquam id volutpat velit. Sed eu est sed tortor placerat euismod eu nec 125 | mauris. Quisque viverra erat sit amet neque maximus posuere. Nam est 126 | velit, ultrices eu justo non, varius aliquet neque. Duis augue magna, 127 | scelerisque vitae faucibus eget, suscipit sit amet neque. Aliquam in ex 128 | gravida, venenatis magna eu, vestibulum ante. Aliquam luctus elit at felis 129 | luctus blandit. Sed blandit ut tellus quis tincidunt. Proin egestas dui 130 | leo, a blandit velit finibus nec. Praesent odio enim, porta vel justo 131 | ultricies, maximus blandit tortor. Nam lobortis eget mi ac ultrices. 132 | Curabitur ac sem purus. Interdum et malesuada fames ac ante ipsum primis 133 | in faucibus. Morbi purus urna, gravida at nunc id, iaculis euismod augue. 134 | Suspendisse elementum diam eu diam commodo, eu molestie quam luctus. 135 | Vestibulum porttitor tellus nunc, sit amet efficitur eros fringilla eu. 136 | Etiam ornare rhoncus felis id rhoncus. Suspendisse lectus nibh, 137 | sollicitudin in felis eu, interdum rutrum tortor. Etiam accumsan congue 138 | venenatis. Proin dapibus dapibus est, ac pellentesque ipsum gravida a. 139 | Phasellus malesuada accumsan sem, id facilisis risus. Nulla in mi mollis 140 | ligula consectetur interdum. Phasellus ultricies ultrices elementum. Nulla 141 | porttitor fringilla blandit. Duis tincidunt mattis metus, ut sollicitudin 142 | urna fringilla in. Aliquam suscipit eleifend lacus sed euismod. Vestibulum 143 | convallis dui quis semper convallis. Curabitur euismod, arcu sit amet 144 | dictum tincidunt, libero sapien sagittis nulla, eu ullamcorper velit ex in 145 | velit. Pellentesque ut lacus tincidunt, venenatis odio non, egestas sem. 146 | Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 147 | inceptos himenaeos. Vestibulum dapibus ipsum vel accumsan malesuada. 148 | Nullam ac augue dignissim elit accumsan ullamcorper. Vestibulum diam 149 | lectus, placerat sit amet dui ac, commodo placerat nunc. Vestibulum ut 150 | pretium velit. Etiam nec est bibendum, tincidunt metus et, sodales lectus. 151 | Aliquam at libero bibendum, facilisis mauris quis, accumsan risus. Aenean 152 | commodo elit et vestibulum posuere. Vestibulum lacinia neque lacinia 153 | sagittis pellentesque. Etiam at sem mauris. Etiam elementum, nunc quis 154 | scelerisque fermentum, neque quam vestibulum turpis, a sollicitudin diam 155 | nisi vestibulum arcu. Proin vel aliquam nisl. Praesent nec sagittis lorem, 156 | non mattis elit. Nullam sit amet neque a turpis malesuada mollis. Aliquam 157 | ornare ultricies venenatis. Suspendisse vitae urna pretium, mollis augue 158 | in, consectetur enim. Quisque ut ex at lacus semper hendrerit. Etiam ut 159 | eleifend tortor, sit amet blandit nulla. Nulla non sapien eleifend, 160 | placerat augue eu, sagittis dui. Morbi sit amet dui enim. In ac interdum 161 | magna. Aliquam erat volutpat. Nullam eu blandit metus. Donec ac ante sit 162 | amet erat scelerisque congue nec sit amet dui. Sed viverra velit at nulla 163 | imperdiet, quis interdum nunc vestibulum. Quisque ac pellentesque sapien, 164 | nec congue erat. Quisque non dictum elit, in posuere velit. Sed et aliquet 165 | nisi. Nullam ullamcorper euismod ullamcorper. Sed placerat consectetur leo 166 | ut mattis. Morbi tincidunt nisi ut faucibus interdum. Praesent in est 167 | nulla. Nulla urna odio, dictum quis sagittis sit amet, eleifend et ipsum. 168 | Nunc non venenatis sem, in semper mi. Curabitur non interdum leo. Nulla eu 169 | aliquam velit, aliquam iaculis ipsum. 170 |
171 | ) 172 | } 173 | 174 | export default About 175 | -------------------------------------------------------------------------------- /react-router-demo/src/components/Admin.js: -------------------------------------------------------------------------------- 1 | export const Admin = () => { 2 | return
Admin user
3 | } 4 | -------------------------------------------------------------------------------- /react-router-demo/src/components/FeaturedProducts.js: -------------------------------------------------------------------------------- 1 | export const FeaturedProducts = () => { 2 | return
List of featured products
3 | } 4 | -------------------------------------------------------------------------------- /react-router-demo/src/components/Home.js: -------------------------------------------------------------------------------- 1 | import { useNavigate } from 'react-router-dom' 2 | 3 | export const Home = () => { 4 | const navigate = useNavigate() 5 | return ( 6 | <> 7 |
Home Page
8 | 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /react-router-demo/src/components/Login.js: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | import { useNavigate, useLocation } from 'react-router-dom' 3 | import { useAuth } from './auth' 4 | 5 | export const Login = () => { 6 | const [user, setUser] = useState('') 7 | const navigate = useNavigate() 8 | const location = useLocation() 9 | const auth = useAuth() 10 | 11 | const redirectPath = location.state?.path || '/' 12 | 13 | const handleLogin = () => { 14 | auth.login(user) 15 | navigate(redirectPath, { replace: true }) 16 | } 17 | return ( 18 |
19 | {' '} 22 | 23 |
24 | ) 25 | } 26 | -------------------------------------------------------------------------------- /react-router-demo/src/components/Navbar.js: -------------------------------------------------------------------------------- 1 | import { NavLink } from 'react-router-dom' 2 | import { useAuth } from './auth' 3 | 4 | export const Navbar = () => { 5 | const auth = useAuth() 6 | const navLinkStyles = ({ isActive }) => { 7 | return { 8 | fontWeight: isActive ? 'bold' : 'normal', 9 | textDecoration: isActive ? 'none' : 'underline' 10 | } 11 | } 12 | 13 | return ( 14 | 33 | ) 34 | } 35 | -------------------------------------------------------------------------------- /react-router-demo/src/components/NewProducts.js: -------------------------------------------------------------------------------- 1 | export const NewProducts = () => { 2 | return
List of new products
3 | } 4 | -------------------------------------------------------------------------------- /react-router-demo/src/components/NoMatch.js: -------------------------------------------------------------------------------- 1 | export const NoMatch = () => { 2 | return
Page not found
3 | } 4 | -------------------------------------------------------------------------------- /react-router-demo/src/components/OrderSummary.js: -------------------------------------------------------------------------------- 1 | import { useNavigate } from 'react-router-dom' 2 | 3 | export const OrderSummary = () => { 4 | const navigate = useNavigate() 5 | 6 | return ( 7 | <> 8 |
9 | Order confirmed! 10 | 11 |
12 | 13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /react-router-demo/src/components/Products.js: -------------------------------------------------------------------------------- 1 | import { Link, Outlet } from 'react-router-dom' 2 | 3 | export const Products = () => { 4 | return ( 5 | <> 6 |
7 | 8 |
9 | 13 | 14 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /react-router-demo/src/components/Profile.js: -------------------------------------------------------------------------------- 1 | import { useNavigate } from 'react-router-dom' 2 | import { useAuth } from './auth' 3 | 4 | export const Profile = () => { 5 | const navigate = useNavigate() 6 | const auth = useAuth() 7 | const handleLogout = () => { 8 | auth.logout() 9 | navigate('/') 10 | } 11 | return ( 12 |
13 | Welcome {auth.user}. 14 |
15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /react-router-demo/src/components/RequireAuth.js: -------------------------------------------------------------------------------- 1 | import { Navigate, useLocation } from 'react-router-dom' 2 | import { useAuth } from './auth' 3 | 4 | export const RequireAuth = ({ children }) => { 5 | const location = useLocation() 6 | const auth = useAuth() 7 | if (!auth.user) { 8 | return 9 | } 10 | return children 11 | } 12 | -------------------------------------------------------------------------------- /react-router-demo/src/components/UserDetails.js: -------------------------------------------------------------------------------- 1 | import { useParams } from 'react-router-dom' 2 | 3 | export const UserDetails = () => { 4 | const { userId } = useParams() 5 | return
Details about user {userId}
6 | } 7 | -------------------------------------------------------------------------------- /react-router-demo/src/components/Users.js: -------------------------------------------------------------------------------- 1 | import { Outlet, useSearchParams } from 'react-router-dom' 2 | 3 | export const Users = () => { 4 | const [searchParams, setSearchParams] = useSearchParams() 5 | const showActiverUsers = searchParams.get('filter') === 'active' 6 | return ( 7 | <> 8 |
9 | 12 | 13 |
14 | {showActiverUsers ? ( 15 |

Showing active users

16 | ) : ( 17 |

Showing all users

18 | )} 19 | 20 | 21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /react-router-demo/src/components/auth.js: -------------------------------------------------------------------------------- 1 | import { useState, createContext, useContext } from 'react' 2 | 3 | const AuthContext = createContext(null) 4 | 5 | export const AuthProvider = ({ children }) => { 6 | const [user, setUser] = useState(null) 7 | 8 | const login = user => { 9 | setUser(user) 10 | } 11 | 12 | const logout = () => { 13 | setUser(null) 14 | } 15 | 16 | return ( 17 | 18 | {children} 19 | 20 | ) 21 | } 22 | 23 | export const useAuth = () => { 24 | return useContext(AuthContext) 25 | } 26 | -------------------------------------------------------------------------------- /react-router-demo/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | 15 | .primary-nav { 16 | background-color: aliceblue; 17 | padding: 16px 32px; 18 | } 19 | 20 | nav a { 21 | margin-right: 16px; 22 | } 23 | 24 | /* nav a.active { 25 | text-decoration: none; 26 | font-weight: bold; 27 | } */ 28 | -------------------------------------------------------------------------------- /react-router-demo/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import { BrowserRouter } from 'react-router-dom' 4 | import './index.css' 5 | import App from './App' 6 | import reportWebVitals from './reportWebVitals' 7 | 8 | ReactDOM.render( 9 | 10 | 11 | 12 | 13 | , 14 | document.getElementById('root') 15 | ) 16 | 17 | // If you want to start measuring performance in your app, pass a function 18 | // to log results (for example: reportWebVitals(console.log)) 19 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 20 | reportWebVitals() 21 | -------------------------------------------------------------------------------- /react-router-demo/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /react-router-demo/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /react-router-demo/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | --------------------------------------------------------------------------------