Route

 

 

 

현재 클라이언트 소스들의 구성이다. 

우선 src에 있는 index의 경우는 

 

import React from 'react' 

import ReactDOM from 'react-dom' 

import 'babel-polyfill' 

import Root from './client/Root' 

let rootElement = document.getElementById('root') 

ReactDOM.render(<Root/>, rootElement) 

 

실제로 Dom rander를 담당한다. 여기안에는 Client에 Root라는 컴포넌트를 호출한다. 

 

Root.js를 보면 

 

import React from 'react' 

import { BrowserRouter} from 'react-router-dom' 

import Welcome from '../shared/Welcome' 

 

 

const Root = () => { 

return( 

<BrowserRouter> 

<Welcome/> 

</BrowserRouter> 

) 

} 

export default Root; 

 

여기에 직접적으로 react-router-dom을 사용하였다.  

여기선 Welcom이라는 컴포넌트를 호출한다. 이 화면은 Moive의 메인화면이 될것이다. 

 

여기안에서 각각 페이지를 호출하는 과정이 들어가있다. 

 

import React, {Component} from 'react' 

import { BrowserRouter as Router, Route, Link } from "react-router-dom" 

import {Home , Daily, Weekly} from '../pages/index' 

class Welcome extends Component { 

render() { 

return( 

<div> 

<h1>Welcome movie</h1> 

<Route exact path="/movie" component = {Home} /> 

<Route path="/movie/daily" component ={Daily}/> 

<Route path="/movie/weekly" component ={Weekly}/> 

</div> 

) 

} 

} 

 

 

export default Welcome; 

 

현재는 링크는 하지않고 라우트만 해놨다. 

 

import { BrowserRouter as Router, Route, Link } from "react-router-dom"; 

여기에도 직접적으로 라우트를호출해서 사용하였다. 

 

보면 내용은 

Welcome~ 나오게 되고 

Path /moive /movie/daily   그리고 weekly까지 path에 따라서 호출하는 영역이 달라진다. 

 

이 3가지의 컴포넌트를 각각 호출해도 되지만  이것을 또 묶어놨다. 

 

Pages/index.js를 보면 

 

export { default as Home } from './Home'; 

export { default as Daily } from '../DailyBoxOffice/App'; 

export { default as Weekly } from '../WeeklyChart/App'; 

 

이렇게 실제로 사용된 화면들을 여기에 묶어놓고 사용한다. 

 

강좌를 보고한거긴한데 왜이렇게하는지는 아직 의문이다.? 

 

 

 

홈이고 

 

 

데일리고 

 

 

 

 

위클리다 

 

이제 저 welcom movie있는곳에 메뉴를 만들고 링크를 걸어주면될꺼같다. 

 

 

 

 

 

 

라우트의 파라미터 

 

라우트로 설정한 컴포넌트는 3가지 props를 전달받는다 

 

History  

Location 

Match  

하나씩 알아보자 

 

위크에 week라는라우트를 추가해본다. 

 

 

 

전달받은 props를 확인해보면 다음과같은 데이터가 들어가있다. 사용해보자 

 

 

생겼다 

그런데 이대로는 weekly 호출할때마다 2개의 컴포넌트가 랜더링될것이다 

 

Switch 를 이용해보자 

 

 

 

다음과같이 한 개만 선택이 된다.  

 

Url 쿼리는 

http://localhost:3001/movie/weekly/week?ok=true 

 

 

다음과같이 location.search 에 탑재되어 개발자가 알아서 파싱하던가 해야한다. 

V3에서는 공식적으로지원했다고하던데 v4가면서 없어짐 문자열임 

query-string 같은거쓰면 object로 만들어주는데 

우선 하지않겠음 그게 중요한게 아니니깐 

 

History는  

여태까지 히스토리르 담고있다 

여기 기능중에 중요한건 push나 go goback replace로 다른페이지를 호출할수있다는것이다. 

 

 

 

 

이렇게 구성하면 

저 버튼 누르면 뒤로가기가 된다 편의성 기능같다. 나중에 모두 테스트해보자 

 

 

이제 라우터의 가장 핵심적이고 많이 쓸만한  link를 해보자 

 

A테그와 같은 효과를 내지만 새로고침 되지않는다 귣