├── .gitignore
├── 01-02-Router
├── package.json
├── public
│ └── index.html
└── src
│ ├── index.js
│ └── styles.css
├── 03-LInk
├── package.json
├── public
│ └── index.html
└── src
│ ├── index.js
│ └── styles.css
├── 04-NavLink
├── package.json
├── public
│ └── index.html
└── src
│ ├── index.js
│ └── styles.css
├── 05-URL-Params
├── package.json
├── public
│ └── index.html
└── src
│ ├── index.js
│ └── styles.css
├── 06-URL-Regex
├── package.json
├── public
│ └── index.html
└── src
│ ├── index.js
│ └── styles.css
├── 07-Query-Params
├── package.json
├── public
│ └── index.html
└── src
│ ├── index.js
│ └── styles.css
├── 08-Catch-All
├── package.json
├── public
│ └── index.html
└── src
│ ├── index.js
│ └── styles.css
├── 09-Conditional
├── package.json
├── public
│ └── index.html
└── src
│ ├── index.js
│ └── styles.css
├── 10-Multiple
├── package.json
├── public
│ └── index.html
└── src
│ ├── index.js
│ └── styles.css
├── 11-Nested
├── package.json
├── public
│ └── index.html
└── src
│ ├── index.js
│ └── styles.css
├── 12-Redirect
├── package.json
├── public
│ └── index.html
└── src
│ ├── index.js
│ └── styles.css
├── 13-Prompt
├── package.json
├── public
│ └── index.html
└── src
│ ├── index.js
│ └── styles.css
├── 14-Routers
├── package.json
├── public
│ └── index.html
└── src
│ ├── index.js
│ └── styles.css
├── README.md
├── package.json
├── public
├── favicon.ico
└── index.html
└── src
├── App.css
├── App.js
└── index.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 |
12 | # misc
13 | .DS_Store
14 | .env
15 | npm-debug.log*
16 | yarn-debug.log*
17 | yarn-error.log*
18 |
19 |
--------------------------------------------------------------------------------
/01-02-Router/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "new",
3 | "version": "1.0.0",
4 | "description": "",
5 | "keywords": [],
6 | "main": "src/index.js",
7 | "dependencies": {
8 | "react": "16.4.2",
9 | "react-dom": "16.4.2",
10 | "react-router-dom": "4.3.1",
11 | "react-scripts": "1.1.4"
12 | },
13 | "devDependencies": {},
14 | "scripts": {
15 | "start": "react-scripts start",
16 | "build": "react-scripts build",
17 | "test": "react-scripts test --env=jsdom",
18 | "eject": "react-scripts eject"
19 | }
20 | }
--------------------------------------------------------------------------------
/01-02-Router/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
23 | React App
24 |
25 |
26 |
27 |
30 |
31 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/01-02-Router/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { BrowserRouter as Router, Route } from "react-router-dom";
3 | import ReactDOM from "react-dom";
4 |
5 | const Home = props => {
6 | console.log(props);
7 | return Home
;
8 | };
9 |
10 | const App = props => (
11 |
12 |
13 |
14 | {/* About
} />*/}
15 | match && About
} />
16 |
17 |
18 | );
19 |
20 | ReactDOM.render(, document.getElementById("root"));
21 | export default App;
22 |
--------------------------------------------------------------------------------
/01-02-Router/src/styles.css:
--------------------------------------------------------------------------------
1 | .App {
2 | font-family: sans-serif;
3 | text-align: center;
4 | }
5 |
--------------------------------------------------------------------------------
/03-LInk/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "new",
3 | "version": "1.0.0",
4 | "description": "",
5 | "keywords": [],
6 | "main": "src/index.js",
7 | "dependencies": {
8 | "react": "16.4.2",
9 | "react-dom": "16.4.2",
10 | "react-router-dom": "4.3.1",
11 | "react-scripts": "1.1.5"
12 | },
13 | "devDependencies": {},
14 | "scripts": {
15 | "start": "react-scripts start",
16 | "build": "react-scripts build",
17 | "test": "react-scripts test --env=jsdom",
18 | "eject": "react-scripts eject"
19 | }
20 | }
--------------------------------------------------------------------------------
/03-LInk/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
23 | React App
24 |
25 |
26 |
27 |
30 |
31 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/03-LInk/src/index.js:
--------------------------------------------------------------------------------
1 | import ReactDOM from "react-dom";
2 |
3 | import React from "react";
4 | import { BrowserRouter as Router, Route, Link } from "react-router-dom";
5 |
6 | const Links = () => (
7 |
14 | );
15 |
16 | const App = props => (
17 |
18 |
19 |
20 | Home
} />
21 | About
} />
22 | Contact
} />
23 |
24 |
25 | );
26 |
27 | export default App;
28 | const rootElement = document.getElementById("root");
29 | ReactDOM.render(, rootElement);
30 |
--------------------------------------------------------------------------------
/03-LInk/src/styles.css:
--------------------------------------------------------------------------------
1 | .App {
2 | font-family: sans-serif;
3 | text-align: center;
4 | }
5 |
--------------------------------------------------------------------------------
/04-NavLink/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "new",
3 | "version": "1.0.0",
4 | "description": "",
5 | "keywords": [],
6 | "main": "src/index.js",
7 | "dependencies": {
8 | "react": "16.4.2",
9 | "react-dom": "16.4.2",
10 | "react-router-dom": "4.3.1",
11 | "react-scripts": "1.1.4"
12 | },
13 | "devDependencies": {},
14 | "scripts": {
15 | "start": "react-scripts start",
16 | "build": "react-scripts build",
17 | "test": "react-scripts test --env=jsdom",
18 | "eject": "react-scripts eject"
19 | }
20 | }
--------------------------------------------------------------------------------
/04-NavLink/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
23 | React App
24 |
25 |
26 |
27 |
30 |
31 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/04-NavLink/src/index.js:
--------------------------------------------------------------------------------
1 | import ReactDOM from "react-dom";
2 |
3 | import React from "react";
4 | import { BrowserRouter as Router, Route, NavLink } from "react-router-dom";
5 |
6 | const isActiveFunc = (match, location) => {
7 | console.log(match, location);
8 | return match;
9 | };
10 |
11 | const Links = () => (
12 |
23 | );
24 |
25 | const App = props => (
26 |
27 |
28 |
29 | Home
} />
30 | About
} />
31 | Contact
} />
32 |
33 |
34 | );
35 |
36 | export default App;
37 | const rootElement = document.getElementById("root");
38 | ReactDOM.render(, rootElement);
39 |
--------------------------------------------------------------------------------
/04-NavLink/src/styles.css:
--------------------------------------------------------------------------------
1 | .App {
2 | font-family: sans-serif;
3 | text-align: center;
4 | }
5 |
--------------------------------------------------------------------------------
/05-URL-Params/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "new",
3 | "version": "1.0.0",
4 | "description": "",
5 | "keywords": [],
6 | "main": "src/index.js",
7 | "dependencies": {
8 | "react": "16.4.2",
9 | "react-dom": "16.4.2",
10 | "react-router-dom": "4.3.1",
11 | "react-scripts": "1.1.4"
12 | },
13 | "devDependencies": {},
14 | "scripts": {
15 | "start": "react-scripts start",
16 | "build": "react-scripts build",
17 | "test": "react-scripts test --env=jsdom",
18 | "eject": "react-scripts eject"
19 | }
20 | }
--------------------------------------------------------------------------------
/05-URL-Params/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
23 | React App
24 |
25 |
26 |
27 |
30 |
31 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/05-URL-Params/src/index.js:
--------------------------------------------------------------------------------
1 | import ReactDOM from "react-dom";
2 | import React from "react";
3 | import { BrowserRouter as Router, Route } from "react-router-dom";
4 |
5 | const App = props => (
6 |
7 |
8 | (
14 |
15 | PAGE: {match.params.page || "Home"}
16 |
17 | SUBPAGE: {match.params.subpage}
18 |
19 | )}
20 | />
21 |
22 |
23 | );
24 |
25 | export default App;
26 | const rootElement = document.getElementById("root");
27 | ReactDOM.render(, rootElement);
28 |
--------------------------------------------------------------------------------
/05-URL-Params/src/styles.css:
--------------------------------------------------------------------------------
1 | .App {
2 | font-family: sans-serif;
3 | text-align: center;
4 | }
5 |
--------------------------------------------------------------------------------
/06-URL-Regex/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "new",
3 | "version": "1.0.0",
4 | "description": "",
5 | "keywords": [],
6 | "main": "src/index.js",
7 | "dependencies": {
8 | "react": "16.4.2",
9 | "react-dom": "16.4.2",
10 | "react-router-dom": "4.3.1",
11 | "react-scripts": "1.1.4"
12 | },
13 | "devDependencies": {},
14 | "scripts": {
15 | "start": "react-scripts start",
16 | "build": "react-scripts build",
17 | "test": "react-scripts test --env=jsdom",
18 | "eject": "react-scripts eject"
19 | }
20 | }
--------------------------------------------------------------------------------
/06-URL-Regex/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
23 | React App
24 |
25 |
26 |
27 |
30 |
31 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/06-URL-Regex/src/index.js:
--------------------------------------------------------------------------------
1 | import ReactDOM from "react-dom";
2 | import React from "react";
3 | import { BrowserRouter as Router, Route } from "react-router-dom";
4 |
5 | const App = props => (
6 |
7 |
8 | (
13 |
14 | paramA: {match.params.a}
15 |
16 | paramB: {match.params.b}
17 |
18 | )}
19 | />
20 |
21 |
22 | );
23 |
24 | export default App;
25 | const rootElement = document.getElementById("root");
26 | ReactDOM.render(, rootElement);
27 |
--------------------------------------------------------------------------------
/06-URL-Regex/src/styles.css:
--------------------------------------------------------------------------------
1 | .App {
2 | font-family: sans-serif;
3 | text-align: center;
4 | }
5 |
--------------------------------------------------------------------------------
/07-Query-Params/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "new",
3 | "version": "1.0.0",
4 | "description": "",
5 | "keywords": [],
6 | "main": "src/index.js",
7 | "dependencies": {
8 | "react": "16.4.2",
9 | "react-dom": "16.4.2",
10 | "react-router-dom": "4.3.1",
11 | "react-scripts": "1.1.4"
12 | },
13 | "devDependencies": {},
14 | "scripts": {
15 | "start": "react-scripts start",
16 | "build": "react-scripts build",
17 | "test": "react-scripts test --env=jsdom",
18 | "eject": "react-scripts eject"
19 | }
20 | }
--------------------------------------------------------------------------------
/07-Query-Params/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
23 | React App
24 |
25 |
26 |
27 |
30 |
31 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/07-Query-Params/src/index.js:
--------------------------------------------------------------------------------
1 | import ReactDOM from "react-dom";
2 |
3 | import React from "react";
4 | import { BrowserRouter as Router, Route, Link } from "react-router-dom";
5 |
6 | const Links = () => (
7 |
11 | );
12 |
13 | const App = props => (
14 |
15 |
16 |
17 |
(
20 |
21 |
root
22 |
{JSON.stringify(match)}
23 |
{JSON.stringify(location)}
24 |
{new URLSearchParams(location.search).get("id")}
25 |
17 |
18 |
19 | Home
} />
20 | About
} />
21 | Page not found
} />
22 |
23 |
24 |
25 | );
26 |
27 | export default App;
28 | const rootElement = document.getElementById("root");
29 | ReactDOM.render(, rootElement);
30 |
--------------------------------------------------------------------------------
/08-Catch-All/src/styles.css:
--------------------------------------------------------------------------------
1 | .App {
2 | font-family: sans-serif;
3 | text-align: center;
4 | }
5 |
--------------------------------------------------------------------------------
/09-Conditional/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "new",
3 | "version": "1.0.0",
4 | "description": "",
5 | "keywords": [],
6 | "main": "src/index.js",
7 | "dependencies": {
8 | "react": "16.4.2",
9 | "react-dom": "16.4.2",
10 | "react-router-dom": "4.3.1",
11 | "react-scripts": "1.1.4"
12 | },
13 | "devDependencies": {},
14 | "scripts": {
15 | "start": "react-scripts start",
16 | "build": "react-scripts build",
17 | "test": "react-scripts test --env=jsdom",
18 | "eject": "react-scripts eject"
19 | }
20 | }
--------------------------------------------------------------------------------
/09-Conditional/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
23 | React App
24 |
25 |
26 |
27 |
30 |
31 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/09-Conditional/src/index.js:
--------------------------------------------------------------------------------
1 | import ReactDOM from "react-dom";
2 | import React from "react";
3 | import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
4 |
5 | const Links = () => (
6 |
11 | );
12 |
13 | const App = props => (
14 |
15 |
16 |
17 |
18 | Home
} />
19 | About
} />
20 | Contact
} />
21 | Item: {match.params.itemid}
}
24 | />
25 |
26 |
27 |
28 | );
29 |
30 | export default App;
31 | const rootElement = document.getElementById("root");
32 | ReactDOM.render(, rootElement);
33 |
--------------------------------------------------------------------------------
/09-Conditional/src/styles.css:
--------------------------------------------------------------------------------
1 | .App {
2 | font-family: sans-serif;
3 | text-align: center;
4 | }
5 |
--------------------------------------------------------------------------------
/10-Multiple/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "new",
3 | "version": "1.0.0",
4 | "description": "",
5 | "keywords": [],
6 | "main": "src/index.js",
7 | "dependencies": {
8 | "react": "16.4.2",
9 | "react-dom": "16.4.2",
10 | "react-router-dom": "4.3.1",
11 | "react-scripts": "1.1.4"
12 | },
13 | "devDependencies": {},
14 | "scripts": {
15 | "start": "react-scripts start",
16 | "build": "react-scripts build",
17 | "test": "react-scripts test --env=jsdom",
18 | "eject": "react-scripts eject"
19 | }
20 | }
--------------------------------------------------------------------------------
/10-Multiple/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
23 | React App
24 |
25 |
26 |
27 |
30 |
31 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/10-Multiple/src/index.js:
--------------------------------------------------------------------------------
1 | import ReactDOM from "react-dom";
2 | import React from "react";
3 | import { BrowserRouter as Router, Route, Link } from "react-router-dom";
4 |
5 | const Links = () => (
6 |
12 | );
13 |
14 | const Header = ({ match }) => (
15 |
16 | {match.params.page} header
}
19 | />
20 |
21 | );
22 |
23 | const Content = ({ match }) => (
24 |
25 |
{match.params.page} content
}
28 | />
29 |
35 |
36 |
37 |
38 | );
39 |
40 | export default App;
41 | const rootElement = document.getElementById("root");
42 | ReactDOM.render(, rootElement);
43 |
--------------------------------------------------------------------------------
/10-Multiple/src/styles.css:
--------------------------------------------------------------------------------
1 | .App {
2 | font-family: sans-serif;
3 | text-align: center;
4 | }
5 |
--------------------------------------------------------------------------------
/11-Nested/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "new",
3 | "version": "1.0.0",
4 | "description": "",
5 | "keywords": [],
6 | "main": "src/index.js",
7 | "dependencies": {
8 | "react": "16.4.2",
9 | "react-dom": "16.4.2",
10 | "react-router-dom": "4.3.1",
11 | "react-scripts": "1.1.4"
12 | },
13 | "devDependencies": {},
14 | "scripts": {
15 | "start": "react-scripts start",
16 | "build": "react-scripts build",
17 | "test": "react-scripts test --env=jsdom",
18 | "eject": "react-scripts eject"
19 | }
20 | }
--------------------------------------------------------------------------------
/11-Nested/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
23 | React App
24 |
25 |
26 |
27 |
30 |
31 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/11-Nested/src/index.js:
--------------------------------------------------------------------------------
1 | import ReactDOM from "react-dom";
2 | import React from "react";
3 | import { BrowserRouter as Router, Route, Link } from "react-router-dom";
4 |
5 | const Home = () => Home
;
6 | const Menu = () => (
7 |
8 |
Menu
9 | Food
10 | Drinks
11 | Sides
12 | {match.params.section}
}
15 | />
16 |
17 | );
18 |
19 | const App = props => (
20 |
21 |
22 | Home
23 | Menu
24 |
25 |
26 |
27 |
28 | );
29 |
30 | export default App;
31 | const rootElement = document.getElementById("root");
32 | ReactDOM.render(, rootElement);
33 |
--------------------------------------------------------------------------------
/11-Nested/src/styles.css:
--------------------------------------------------------------------------------
1 | .App {
2 | font-family: sans-serif;
3 | text-align: center;
4 | }
5 |
--------------------------------------------------------------------------------
/12-Redirect/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "new",
3 | "version": "1.0.0",
4 | "description": "",
5 | "keywords": [],
6 | "main": "src/index.js",
7 | "dependencies": {
8 | "react": "16.4.2",
9 | "react-dom": "16.4.2",
10 | "react-router-dom": "4.3.1",
11 | "react-scripts": "1.1.4"
12 | },
13 | "devDependencies": {},
14 | "scripts": {
15 | "start": "react-scripts start",
16 | "build": "react-scripts build",
17 | "test": "react-scripts test --env=jsdom",
18 | "eject": "react-scripts eject"
19 | }
20 | }
--------------------------------------------------------------------------------
/12-Redirect/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
23 | React App
24 |
25 |
26 |
27 |
30 |
31 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/12-Redirect/src/index.js:
--------------------------------------------------------------------------------
1 | import ReactDOM from "react-dom";
2 | import React from "react";
3 | import {
4 | BrowserRouter as Router,
5 | Route,
6 | Link,
7 | Switch,
8 | Redirect
9 | } from "react-router-dom";
10 |
11 | const loggedin = true;
12 | const Links = () => (
13 |
19 | );
20 |
21 | const App = props => (
22 |
23 |
24 |
25 | Home
} />
26 | New: {match.params.str}
}
29 | />
30 |
31 | }
34 | />
35 |
36 |
39 | loggedin ? (
40 | Welcome to the protected page
41 | ) : (
42 |
43 | )
44 | }
45 | />
46 |
47 |
48 | );
49 |
50 | export default App;
51 | const rootElement = document.getElementById("root");
52 | ReactDOM.render(, rootElement);
53 |
--------------------------------------------------------------------------------
/12-Redirect/src/styles.css:
--------------------------------------------------------------------------------
1 | .App {
2 | font-family: sans-serif;
3 | text-align: center;
4 | }
5 |
--------------------------------------------------------------------------------
/13-Prompt/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "new",
3 | "version": "1.0.0",
4 | "description": "",
5 | "keywords": [],
6 | "main": "src/index.js",
7 | "dependencies": {
8 | "react": "16.4.2",
9 | "react-dom": "16.4.2",
10 | "react-router-dom": "4.3.1",
11 | "react-scripts": "1.1.4"
12 | },
13 | "devDependencies": {},
14 | "scripts": {
15 | "start": "react-scripts start",
16 | "build": "react-scripts build",
17 | "test": "react-scripts test --env=jsdom",
18 | "eject": "react-scripts eject"
19 | }
20 | }
--------------------------------------------------------------------------------
/13-Prompt/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
23 | React App
24 |
25 |
26 |
27 |
30 |
31 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/13-Prompt/src/index.js:
--------------------------------------------------------------------------------
1 | import ReactDOM from "react-dom";
2 | import React from "react";
3 | import { BrowserRouter as Router, Route, Link, Prompt } from "react-router-dom";
4 |
5 | const Home = () => Home
;
6 | class Form extends React.Component {
7 | state = { dirty: false };
8 | setDirty = () => this.setState({ dirty: true });
9 | render() {
10 | return (
11 |
16 | );
17 | }
18 | }
19 | const App = props => (
20 |
21 |
22 | Home
23 | Form
24 |
25 |
26 |
27 |
28 | );
29 |
30 | export default App;
31 | const rootElement = document.getElementById("root");
32 | ReactDOM.render(, rootElement);
33 |
--------------------------------------------------------------------------------
/13-Prompt/src/styles.css:
--------------------------------------------------------------------------------
1 | .App {
2 | font-family: sans-serif;
3 | text-align: center;
4 | }
5 |
--------------------------------------------------------------------------------
/14-Routers/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "new",
3 | "version": "1.0.0",
4 | "description": "",
5 | "keywords": [],
6 | "main": "src/index.js",
7 | "dependencies": {
8 | "react": "16.4.2",
9 | "react-dom": "16.4.2",
10 | "react-router-dom": "4.3.1",
11 | "react-scripts": "1.1.4"
12 | },
13 | "devDependencies": {},
14 | "scripts": {
15 | "start": "react-scripts start",
16 | "build": "react-scripts build",
17 | "test": "react-scripts test --env=jsdom",
18 | "eject": "react-scripts eject"
19 | }
20 | }
--------------------------------------------------------------------------------
/14-Routers/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
23 | React App
24 |
25 |
26 |
27 |
30 |
31 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/14-Routers/src/index.js:
--------------------------------------------------------------------------------
1 | import ReactDOM from "react-dom";
2 | import React from "react";
3 | import {
4 | BrowserRouter,
5 | HashRouter,
6 | MemoryRouter,
7 | StaticRouter,
8 | Link,
9 | Route
10 | } from "react-router-dom";
11 |
12 | const LinksRoutes = () => (
13 |
14 | Home
15 | About
16 | Home
} />
17 | About
} />
18 |
19 | );
20 |
21 | const forceRefresh = () => {
22 | console.log(new Date());
23 | return false;
24 | };
25 |
26 | const BrowserRouterApp = () => (
27 |
28 |
29 |
30 | );
31 |
32 | const HashRouterApp = () => (
33 |
34 |
35 |
36 | );
37 |
38 | const MemoryRouterApp = () => (
39 |
40 |
41 |
42 | );
43 |
44 | const StaticRouterApp = () => (
45 |
46 |
47 |
48 | );
49 |
50 | export default MemoryRouterApp;
51 | const rootElement = document.getElementById("root");
52 | ReactDOM.render(, rootElement);
53 |
--------------------------------------------------------------------------------
/14-Routers/src/styles.css:
--------------------------------------------------------------------------------
1 | .App {
2 | font-family: sans-serif;
3 | text-align: center;
4 | }
5 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | React Router v4 takes an entirely new approach to routing and handling URLs in your React applications. It fully embraces the concept of declarative programming and a component based development process. In practice, this turns out to be very nice and gives you a routing solution that is less configuration heavy than many previous solutions.
3 |
4 | In this course, you will learn about the basics of React Router v4 to help you get started. We will look at the core components that React Router supplies and how they interact together to create a robust routing solution for your React applications.
5 |
6 | ## NOTE:
7 | The individual lessons are now independent folders and compatible with CodeSandbox
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "egghead-react-router-v4",
3 | "version": "0.1.0",
4 | "private": true,
5 | "devDependencies": {
6 | "react-scripts": "0.9.0"
7 | },
8 | "dependencies": {
9 | "react": "16.4.2",
10 | "react-dom": "16.4.2",
11 | "react-router-dom": "4.3.1"
12 | },
13 | "scripts": {
14 | "start": "react-scripts start",
15 | "build": "react-scripts build",
16 | "test": "react-scripts test --env=jsdom",
17 | "eject": "react-scripts eject"
18 | }
19 | }
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/eggheadio-projects/egghead-react-router-v4/3caaf9509da45073208771b6fccc93dc8c2aeb27/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
16 | React App
17 |
18 |
19 |
20 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | a {
2 | margin: 5px;
3 | }
4 |
5 | a, a:visited{
6 | color: blue;
7 | }
8 |
9 | a.active {
10 | color: red;
11 | }
12 |
13 | .content {
14 | border:1px solid red;
15 | }
16 |
17 | .header {
18 | border:1px solid blue;
19 | }
20 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './App.css';
3 | import {
4 | BrowserRouter as Router,
5 | Route,
6 | Link
7 | } from 'react-router-dom';
8 | import './App.css';
9 |
10 | const lessons = [
11 | {id: '01-Router'},
12 | {id: '02-Link'},
13 | {id: '03-NavLink'},
14 | {id: '04-URL-Params'},
15 | {id: '05-URL-Regex'},
16 | {id: '06-Query-Params'},
17 | {id: '07-Catch-All'},
18 | {id: '08-Conditional'},
19 | {id: '09-Multiple'},
20 | {id: '10-Nested'},
21 | {id: '11-Redirect'},
22 | {id: '12-Prompt'},
23 | {id: '13-Routers'}
24 | ]
25 |
26 | lessons.forEach(l => l.Component = require(`./lessons/${l.id}/App`).default)
27 | const Links = () =>
28 |
29 | {lessons.map((l, i) => (
30 | - {l.id}
31 | ))}
32 |
33 |
34 | const Back = () => ←Back to lessons
35 |
36 | class App extends React.Component {
37 | render(){
38 | return (
39 |
40 |
41 |
42 |
43 | {lessons.map(({id, Component}) => (
44 | } />
45 | ))}
46 |
47 |
48 | )
49 | }
50 | }
51 |
52 | export default App;
53 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | ReactDOM.render(
6 | ,
7 | document.getElementById('root')
8 | );
9 |
--------------------------------------------------------------------------------