권주희

setting basic router

This diff could not be displayed because it is too large.
......@@ -8,6 +8,7 @@
"@testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1"
},
"scripts": {
......
import React from 'react';
import logo from './logo.svg';
import './App.css';
import React, { Component } from "react";
import { HashRouter, Route } from "react-router-dom";
import ScrollToTop from "./ScrollToTop";
import Home from "./home";
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<HashRouter basename={process.env.PUBLIC_URL}>
<ScrollToTop>
<div className="App">
<Route exact path="/" component={Home} />
</div>
</ScrollToTop>
</HashRouter>
);
}
}
export default App;
......
import { Component } from "react";
import { withRouter } from "react-router-dom";
class ScrollToTop extends Component {
componentDidUpdate(prevProps) {
if (this.props.location !== prevProps.location) {
window.scrollTo(0, 0);
}
}
render() {
return this.props.children;
}
}
export default withRouter(ScrollToTop);
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
}