react-router dom 적용

react-router-dom
React-Router 란? 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태

cmd> npm install react-router-dom

routes와
components 폴더를 생성하고
각각 home,about.js css와 movie.js css를 넣는다

home.js는 기존 app.js 코드를 넣고
app부분을 home으로 수정한다

후 app.js를 이런식으로 수정

import React from 'react';
import './App.css';
import {HashRouter,Route} from 'react-router-dom';
import About from './routes/About';

function App(){
  return <HashRouter>
    <Route path="/about" component={About}/>
  </HashRouter>  
}

export default App;

HashRouter안에
Route태그를 넣는다. Route태그에는 2가지 props를 전달 할 수 있는데
url을 위한 path props와 컴포넌트 호출을 위한 component props다.

import React from 'react';

function About(){
return <span>About this page</span>

}

export default About;

about.js를 수정 한 뒤

주소 뒤에 about을 붙이면 about 컴포넌트를 보여준다.

라우터의 동작

만약

<Route path="/home">
<h1>1</h1>
</Route>

<Route path="/home/intro">
<h1>2</h1>
</Route>

이면 일반적으로 /home에서는 1

/home/intro에서는 2가 출력 된다고 예상 할 수 있다

그러나 /home/intro에서는 1,2가 같이 출력된다.

라우터가 url을 찾는 방식은 아래와 같다

/, /home, /home/intro 순으로
path props가 있는지 찾는다

근데 path props에 /home, /home/intro 둘다 존재하기에

후자에선 두 컴포넌트 모두 보여지는 것

   <Route path="/" exact={true} component={Home}/>
    <Route path="/about" component={About}/>

그래서 상위 라우터 컴포넌트에 exact 속성을 true로 주면
하위 라우터에 같이 넘어가지 않게 된다.

app.js

import React from 'react';
import './App.css';
import {HashRouter,Route} from 'react-router-dom';
import About from './routes/About';
import Home from './routes/Home'

function App(){
  return( <HashRouter>
    <Route path="/" exact={true} component={Home}/>
    <Route path="/about" component={About}/>
  </HashRouter>  
  );
}

export default App;

About.css

about__container {
    box-shadow: 0 13px 27 -5px rgba(50,50,93,0.25),0 8px 16px -8px rgba(0,0,0,0.3)
    ,0 -6px 16px -6px rgba(0,0,0,0.25);
    padding:20px;
    border-radius:5px;
    background-color: white;
    margin: 0 auto;
    margin-top:100px;
    width: 100%;
    max-width: 400px;
    font_weight:300;
}

.about__container span:first-child{
    font-size:20px
}
.about__contatner span:last-child{
    display: block;
    margin-top: 10px;
}

https://developer.mozilla.org/ko/docs/Web/CSS/box-shadow
https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child

About.js

import React from 'react';
import './App.css';
import {HashRouter,Route} from 'react-router-dom';
import About from './routes/About';
import Home from './routes/Home'

function App(){
  return( <HashRouter>
    <Route path="/" exact={true} component={Home}/>
    <Route path="/about" component={About}/>
  </HashRouter>  
  );
}

export default App;