권주희

setting basic router

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 {
7 + constructor(props) {
8 + super(props);
9 + }
10 + render() {
6 return ( 11 return (
12 + <HashRouter basename={process.env.PUBLIC_URL}>
13 + <ScrollToTop>
7 <div className="App"> 14 <div className="App">
8 - <header className="App-header"> 15 + <Route exact path="/" component={Home} />
9 - <img src={logo} className="App-logo" alt="logo" />
10 - <p>
11 - Edit <code>src/App.js</code> and save to reload.
12 - </p>
13 - <a
14 - className="App-link"
15 - href="https://reactjs.org"
16 - target="_blank"
17 - rel="noopener noreferrer"
18 - >
19 - Learn React
20 - </a>
21 - </header>
22 </div> 16 </div>
17 + </ScrollToTop>
18 + </HashRouter>
23 ); 19 );
20 + }
24 } 21 }
25 22
26 export default App; 23 export default App;
......
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);
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 +}