├── src
    ├── setupTests.js
    ├── components
    │   ├── Post.module.css
    │   ├── Home.js
    │   ├── About.js
    │   ├── NotFound.js
    │   ├── PostDetails.js
    │   ├── Nav.module.css
    │   ├── Posts.js
    │   └── Nav.js
    ├── App.css
    ├── index.js
    ├── App.js
    └── serviceWorker.js
├── public
    ├── robots.txt
    ├── manifest.json
    └── index.html
├── README.md
├── .gitignore
└── package.json


/src/setupTests.js:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom/extend-expect';
2 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | 


--------------------------------------------------------------------------------
/src/components/Post.module.css:
--------------------------------------------------------------------------------
1 | .lista{
2 |   list-style: none;
3 | }
4 | 
5 | .navlink{
6 |   color: #adb2b8;
7 | }


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | body {
2 |   background-color: #1f2c3b;
3 | }
4 | 
5 | h1 {
6 |   color: #adb2b8;
7 |   padding-left: 20px;
8 | }


--------------------------------------------------------------------------------
/src/components/Home.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const Home = () => {
 4 |   return (
 5 |     <div>
 6 |     	<h1>Home Page</h1>
 7 |     </div>
 8 |   );
 9 | }
10 | 
11 | export default Home;
12 | 


--------------------------------------------------------------------------------
/src/components/About.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const About = () => {
 4 |   return (
 5 |     <div>
 6 |     	<h1>About Page</h1>
 7 |     </div>
 8 |   );
 9 | }
10 | 
11 | export default About;
12 | 


--------------------------------------------------------------------------------
/src/components/NotFound.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const NotFound = () => {
 4 |   return (
 5 |     <div>
 6 |     	<h1>404 Not Found</h1>
 7 |     </div>
 8 |   );
 9 | }
10 | 
11 | export default NotFound;
12 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | import * as serviceWorker from './serviceWorker';
5 | 
6 | ReactDOM.render(<App />, document.getElementById('root'));
7 | 
8 | serviceWorker.unregister();


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Nav from './components/Nav';
 3 | import './App.css'
 4 | 
 5 | const App = () => {
 6 |   return (
 7 |     <div className="App">
 8 |       <Nav />
 9 |     </div>
10 |   );
11 | }
12 | 
13 | export default App;
14 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 2 | 
 3 | Easy way to setup routes with React
 4 | 
 5 | `git clone https://github.com/the-akira/react-routes.git`
 6 | 
 7 | ### Available Scripts
 8 | 
 9 | In the project directory, you can run:
10 | 
11 | - `npm install`
12 | - `npm start`
13 | - `npm run build`
14 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/src/components/PostDetails.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | class PostDetails extends React.Component {
 4 |   state = {
 5 |     id: null
 6 |   }	
 7 | 
 8 |   componentDidMount(){
 9 |     let id = this.props.match.params.id;
10 |     this.setState({
11 |       id: id
12 |     })
13 |   }
14 |   render() {
15 |     return (
16 |       <div>
17 |         <h1>Post Details - {this.state.id}</h1>
18 |       </div>
19 |     );
20 |   }
21 | }
22 | 
23 | export default PostDetails;


--------------------------------------------------------------------------------
/src/components/Nav.module.css:
--------------------------------------------------------------------------------
 1 | .navigation {
 2 |   background-color: black;
 3 |   color: #adb2b8;
 4 |   display: flex;
 5 |   justify-content: space-between;
 6 |   align-items: center;
 7 |   padding: 12px;
 8 |   opacity: 0.66;
 9 | }
10 | 
11 | .links {
12 |   list-style: none;
13 |   display: flex;
14 | }
15 | 
16 | .link {
17 |   padding: 6.6px;	
18 |   color: #adb2b8;
19 |   text-decoration: none;
20 |   border: 1px solid #adb2b8;
21 |   margin: 5px;
22 | }
23 | 
24 | .active {
25 |   color: gray;
26 |   opacity: 0.77;
27 | }


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
14 |     <title>React App</title>
15 |   </head>
16 |   <body>
17 |     <noscript>You need to enable JavaScript to run this app.</noscript>
18 |     <div id="root"></div>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/src/components/Posts.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import style from './Post.module.css';
 3 | import { NavLink } from 'react-router-dom';
 4 | 
 5 | class Posts extends React.Component {
 6 |   state = {
 7 |     posts: [
 8 |       { id: 1, title: "Post 1"},
 9 |       { id: 2, title: "Post 2"},
10 |       { id: 3, title: "Post 3"}
11 |     ]
12 |   };
13 | 
14 |   render() {
15 |     return (
16 |       <div>
17 |         <h1>Posts</h1>
18 |         <ul>
19 |           {this.state.posts.map(post => (
20 |             <li className={style.lista} key={post.id}>
21 |               <NavLink className={style.navlink} to={`/posts/${post.id}/`}>{post.title}</NavLink>
22 |             </li>	
23 |           ))}
24 |         </ul>
25 |       </div>
26 |     );
27 |   }
28 | }
29 | 
30 | export default Posts;


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "rotas-react",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^4.2.4",
 7 |     "@testing-library/react": "^9.4.0",
 8 |     "@testing-library/user-event": "^7.2.1",
 9 |     "react": "^16.12.0",
10 |     "react-dom": "^16.12.0",
11 |     "react-router-dom": "^5.1.2",
12 |     "react-scripts": "3.3.0"
13 |   },
14 |   "scripts": {
15 |     "start": "react-scripts start",
16 |     "build": "react-scripts build",
17 |     "test": "react-scripts test",
18 |     "eject": "react-scripts eject"
19 |   },
20 |   "eslintConfig": {
21 |     "extends": "react-app"
22 |   },
23 |   "browserslist": {
24 |     "production": [
25 |       ">0.2%",
26 |       "not dead",
27 |       "not op_mini all"
28 |     ],
29 |     "development": [
30 |       "last 1 chrome version",
31 |       "last 1 firefox version",
32 |       "last 1 safari version"
33 |     ]
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/components/Nav.js:
--------------------------------------------------------------------------------
 1 | import { 
 2 |   HashRouter as Router, 
 3 |   Switch, 
 4 |   Route, 
 5 |   NavLink,
 6 |   Redirect
 7 | } from 'react-router-dom';
 8 | import React from 'react';
 9 | import About from './About';
10 | import Home from './Home';
11 | import NotFound from "./NotFound"
12 | import Posts from './Posts';
13 | import PostDetails from './PostDetails';
14 | import style from './Nav.module.css';
15 | 
16 | const Nav = () => {
17 |   return (
18 |     <Router>
19 |       <div>
20 |         <div className={style.navigation}>
21 |           <ul className={style.links}>
22 |             <NavLink exact={true} className={style.link} activeClassName={style.active} to="/">
23 |               <li>Home</li>
24 |             </NavLink>
25 |             <NavLink className={style.link} activeClassName={style.active} to="/about">
26 |               <li>About</li>
27 |             </NavLink>
28 |             <NavLink className={style.link} activeClassName={style.active} to="/posts">
29 |               <li>Posts</li>
30 |             </NavLink>
31 |           </ul>
32 |         </div>
33 | 
34 |         <Switch>
35 |           <Route path="/" exact component={Home} />
36 |           <Route path="/posts/:id/" component={PostDetails} />
37 |           <Route path="/posts" render={props => <Posts {...props}/>} />
38 |           <Route path="/about" exact component={About} />
39 |           <Route path="/not-found" component={NotFound} />
40 |           <Redirect path="*" to="/not-found" />
41 |         </Switch>
42 |       </div>
43 |     </Router>
44 |   );
45 | }
46 | 
47 | export default Nav;


--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
  1 | const isLocalhost = Boolean(
  2 |   window.location.hostname === 'localhost' ||
  3 |     // [::1] is the IPv6 localhost address.
  4 |     window.location.hostname === '[::1]' ||
  5 |     // 127.0.0.0/8 are considered localhost for IPv4.
  6 |     window.location.hostname.match(
  7 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
  8 |     )
  9 | );
 10 | 
 11 | export function register(config) {
 12 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 13 |     // The URL constructor is available in all browsers that support SW.
 14 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
 15 |     if (publicUrl.origin !== window.location.origin) {
 16 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 17 |       // from what our page is served on. This might happen if a CDN is used to
 18 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 19 |       return;
 20 |     }
 21 | 
 22 |     window.addEventListener('load', () => {
 23 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 24 | 
 25 |       if (isLocalhost) {
 26 |         // This is running on localhost. Let's check if a service worker still exists or not.
 27 |         checkValidServiceWorker(swUrl, config);
 28 | 
 29 |         // Add some additional logging to localhost, pointing developers to the
 30 |         // service worker/PWA documentation.
 31 |         navigator.serviceWorker.ready.then(() => {
 32 |           console.log(
 33 |             'This web app is being served cache-first by a service ' +
 34 |               'worker. To learn more, visit https://bit.ly/CRA-PWA'
 35 |           );
 36 |         });
 37 |       } else {
 38 |         // Is not localhost. Just register service worker
 39 |         registerValidSW(swUrl, config);
 40 |       }
 41 |     });
 42 |   }
 43 | }
 44 | 
 45 | function registerValidSW(swUrl, config) {
 46 |   navigator.serviceWorker
 47 |     .register(swUrl)
 48 |     .then(registration => {
 49 |       registration.onupdatefound = () => {
 50 |         const installingWorker = registration.installing;
 51 |         if (installingWorker == null) {
 52 |           return;
 53 |         }
 54 |         installingWorker.onstatechange = () => {
 55 |           if (installingWorker.state === 'installed') {
 56 |             if (navigator.serviceWorker.controller) {
 57 |               // At this point, the updated precached content has been fetched,
 58 |               // but the previous service worker will still serve the older
 59 |               // content until all client tabs are closed.
 60 |               console.log(
 61 |                 'New content is available and will be used when all ' +
 62 |                   'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
 63 |               );
 64 | 
 65 |               // Execute callback
 66 |               if (config && config.onUpdate) {
 67 |                 config.onUpdate(registration);
 68 |               }
 69 |             } else {
 70 |               // At this point, everything has been precached.
 71 |               // It's the perfect time to display a
 72 |               // "Content is cached for offline use." message.
 73 |               console.log('Content is cached for offline use.');
 74 | 
 75 |               // Execute callback
 76 |               if (config && config.onSuccess) {
 77 |                 config.onSuccess(registration);
 78 |               }
 79 |             }
 80 |           }
 81 |         };
 82 |       };
 83 |     })
 84 |     .catch(error => {
 85 |       console.error('Error during service worker registration:', error);
 86 |     });
 87 | }
 88 | 
 89 | function checkValidServiceWorker(swUrl, config) {
 90 |   // Check if the service worker can be found. If it can't reload the page.
 91 |   fetch(swUrl, {
 92 |     headers: { 'Service-Worker': 'script' }
 93 |   })
 94 |     .then(response => {
 95 |       // Ensure service worker exists, and that we really are getting a JS file.
 96 |       const contentType = response.headers.get('content-type');
 97 |       if (
 98 |         response.status === 404 ||
 99 |         (contentType != null && contentType.indexOf('javascript') === -1)
100 |       ) {
101 |         // No service worker found. Probably a different app. Reload the page.
102 |         navigator.serviceWorker.ready.then(registration => {
103 |           registration.unregister().then(() => {
104 |             window.location.reload();
105 |           });
106 |         });
107 |       } else {
108 |         // Service worker found. Proceed as normal.
109 |         registerValidSW(swUrl, config);
110 |       }
111 |     })
112 |     .catch(() => {
113 |       console.log(
114 |         'No internet connection found. App is running in offline mode.'
115 |       );
116 |     });
117 | }
118 | 
119 | export function unregister() {
120 |   if ('serviceWorker' in navigator) {
121 |     navigator.serviceWorker.ready.then(registration => {
122 |       registration.unregister();
123 |     });
124 |   }
125 | }


--------------------------------------------------------------------------------