Showing
5 changed files
with
66 additions
and
22 deletions
frontend/package-lock.json
0 → 100644
This diff could not be displayed because it is too large.
... | @@ -8,6 +8,7 @@ | ... | @@ -8,6 +8,7 @@ |
8 | "@testing-library/user-event": "^7.1.2", | 8 | "@testing-library/user-event": "^7.1.2", |
9 | "react": "^16.13.1", | 9 | "react": "^16.13.1", |
10 | "react-dom": "^16.13.1", | 10 | "react-dom": "^16.13.1", |
11 | + "react-router-dom": "^5.2.0", | ||
11 | "react-scripts": "3.4.1" | 12 | "react-scripts": "3.4.1" |
12 | }, | 13 | }, |
13 | "scripts": { | 14 | "scripts": { | ... | ... |
1 | -import React from 'react'; | 1 | +import React, { Component } from "react"; |
2 | -import logo from './logo.svg'; | 2 | +import { HashRouter, Route } from "react-router-dom"; |
3 | -import './App.css'; | 3 | +import ScrollToTop from "./ScrollToTop"; |
4 | +import Home from "./home"; | ||
4 | 5 | ||
5 | -function App() { | 6 | +class App extends Component { |
6 | - return ( | 7 | + constructor(props) { |
7 | - <div className="App"> | 8 | + super(props); |
8 | - <header className="App-header"> | 9 | + } |
9 | - <img src={logo} className="App-logo" alt="logo" /> | 10 | + render() { |
10 | - <p> | 11 | + return ( |
11 | - Edit <code>src/App.js</code> and save to reload. | 12 | + <HashRouter basename={process.env.PUBLIC_URL}> |
12 | - </p> | 13 | + <ScrollToTop> |
13 | - <a | 14 | + <div className="App"> |
14 | - className="App-link" | 15 | + <Route exact path="/" component={Home} /> |
15 | - href="https://reactjs.org" | 16 | + </div> |
16 | - target="_blank" | 17 | + </ScrollToTop> |
17 | - rel="noopener noreferrer" | 18 | + </HashRouter> |
18 | - > | 19 | + ); |
19 | - Learn React | 20 | + } |
20 | - </a> | ||
21 | - </header> | ||
22 | - </div> | ||
23 | - ); | ||
24 | } | 21 | } |
25 | 22 | ||
26 | export default App; | 23 | export default App; | ... | ... |
frontend/src/ScrollToTop.js
0 → 100644
1 | +import { Component } from "react"; | ||
2 | +import { withRouter } from "react-router-dom"; | ||
3 | + | ||
4 | +class ScrollToTop extends Component { | ||
5 | + componentDidUpdate(prevProps) { | ||
6 | + if (this.props.location !== prevProps.location) { | ||
7 | + window.scrollTo(0, 0); | ||
8 | + } | ||
9 | + } | ||
10 | + | ||
11 | + render() { | ||
12 | + return this.props.children; | ||
13 | + } | ||
14 | +} | ||
15 | + | ||
16 | +export default withRouter(ScrollToTop); |
frontend/src/home.js
0 → 100644
1 | +import React, { Component } from "react"; | ||
2 | +import logo from "./logo.svg"; | ||
3 | +import "./App.css"; | ||
4 | +export default class Home extends Component { | ||
5 | + constructor(props) { | ||
6 | + super(props); | ||
7 | + this.state = {}; | ||
8 | + } | ||
9 | + | ||
10 | + render() { | ||
11 | + return ( | ||
12 | + <div className="App"> | ||
13 | + <header className="App-header"> | ||
14 | + <img src={logo} className="App-logo" alt="logo" /> | ||
15 | + <p> | ||
16 | + Edit <code>src/App.js</code> and save to reload. | ||
17 | + </p> | ||
18 | + <a | ||
19 | + className="App-link" | ||
20 | + href="https://reactjs.org" | ||
21 | + target="_blank" | ||
22 | + rel="noopener noreferrer" | ||
23 | + > | ||
24 | + Learn React | ||
25 | + </a> | ||
26 | + </header> | ||
27 | + </div> | ||
28 | + ); | ||
29 | + } | ||
30 | +} |
-
Please register or login to post a comment