├── .gitignore
├── package.json
├── public
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
├── src
├── About.tsx
├── App.tsx
├── Home.tsx
├── Post.tsx
├── SpecialButton.tsx
├── index.tsx
└── react-app-env.d.ts
├── tsconfig.json
└── yarn.lock
/.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 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-router-example",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@types/jest": "24.0.18",
7 | "@types/node": "12.7.2",
8 | "@types/react": "16.9.2",
9 | "@types/react-dom": "16.9.0",
10 | "@types/react-router-dom": "^4.3.5",
11 | "react": "^16.9.0",
12 | "react-dom": "^16.9.0",
13 | "react-router-dom": "^5.0.1",
14 | "react-scripts": "3.1.1",
15 | "typescript": "3.5.3"
16 | },
17 | "scripts": {
18 | "start": "react-scripts start",
19 | "build": "react-scripts build",
20 | "test": "react-scripts test",
21 | "eject": "react-scripts eject"
22 | },
23 | "eslintConfig": {
24 | "extends": "react-app"
25 | },
26 | "browserslist": {
27 | "production": [
28 | ">0.2%",
29 | "not dead",
30 | "not op_mini all"
31 | ],
32 | "development": [
33 | "last 1 chrome version",
34 | "last 1 firefox version",
35 | "last 1 safari version"
36 | ]
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benawad/react-router-example/c9736a444ea1f4ebb1b9dc8e6991d5ff106ff064/public/favicon.ico
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benawad/react-router-example/c9736a444ea1f4ebb1b9dc8e6991d5ff106ff064/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benawad/react-router-example/c9736a444ea1f4ebb1b9dc8e6991d5ff106ff064/public/logo512.png
--------------------------------------------------------------------------------
/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/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 |
--------------------------------------------------------------------------------
/src/About.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { Link } from "react-router-dom";
3 |
4 | interface Props {}
5 |
6 | export const About: React.FC = () => {
7 | const postId = 5;
8 | return (
9 |
10 |
about
11 |
go to post 1
12 |
13 | );
14 | };
15 |
--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { BrowserRouter, Route, Switch } from "react-router-dom";
3 | import { Home } from "./Home";
4 | import { About } from "./About";
5 | import { Post } from "./Post";
6 |
7 | // setup
8 | // create routes
9 | // change routes
10 | // route params
11 |
12 | const App: React.FC = () => {
13 | return (
14 |
15 |
16 |
17 |
18 |
19 | 404
} />
20 |
21 |
22 | );
23 | };
24 |
25 | export default App;
26 |
--------------------------------------------------------------------------------
/src/Home.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { Link, RouteComponentProps } from "react-router-dom";
3 | import { SpecialButton } from "./SpecialButton";
4 |
5 | interface Props extends RouteComponentProps {}
6 |
7 | export const Home: React.FC = ({ history, location, match }) => {
8 | console.log(match, location);
9 | return (
10 |
11 |
home
12 |
go to about
13 |
22 |
23 |
24 | );
25 | };
26 |
--------------------------------------------------------------------------------
/src/Post.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { RouteComponentProps } from "react-router";
3 |
4 | interface Props extends RouteComponentProps<{ id: string }> {}
5 |
6 | export const Post: React.FC = ({ match }) => {
7 | // React.useEffect(() => {
8 | // fetch(`api.example.com/posts/${match.params.id}`)
9 | // }, [match.params.id])
10 |
11 | return rendering post {match.params.id}
;
12 | };
13 |
--------------------------------------------------------------------------------
/src/SpecialButton.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { withRouter } from "react-router-dom";
3 |
4 | export const SpecialButton = withRouter(({ history }) => {
5 | return (
6 |
13 | );
14 | });
15 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import App from "./App";
4 |
5 | ReactDOM.render(, document.getElementById("root"));
6 |
--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "allowSyntheticDefaultImports": true,
13 | "strict": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "module": "esnext",
16 | "moduleResolution": "node",
17 | "resolveJsonModule": true,
18 | "isolatedModules": true,
19 | "noEmit": true,
20 | "jsx": "react"
21 | },
22 | "include": [
23 | "src"
24 | ]
25 | }
26 |
--------------------------------------------------------------------------------