[REACT] ROUTER

 

Router (경로기)

 

설치

npm install react-router-dom
npm install query-string

 

BrowserRouter : 라우터 장비로 사용하겠다고 선언

- 'App를 라우터로 사용한다'

import React, { Component } from 'react';
import { BrowserRouter } from 'react-router-dom';

class Root extends Component {
  render() {
    return (
      <div>
        <BrowserRouter>
        <App/>
        </BrowserRouter>
      </div>
    );
  }
};

const App = () => {
  return (
    <div>
      <h1>안녕 난 App야</h1>
    </div>
  );
};

export default Root;

 

Route : 경로 매핑

- exact : 정확하게 주소가 매칭이 될 때 컴포넌트를 가져오게 함

- :pm : url에서 던져주는 값을 pm으로 받아서 가져옴

- match : 던져준 pm을 가져옴 -> component에서 처리

- location : GET 방식으로 값을 전달할 때, url에서 던져주는 값을 가져옴 -> component에서 처리

  - location.search : 값을 객체 타입으로 가져옴

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import querystring from 'query-string';

class Root extends Component {
  render() {
    return (
      <div>
        <BrowserRouter>
        <App/>
        </BrowserRouter>
      </div>
    );
  }
};

// 라우터 장비
const App = () => {
  return (
    <div>
      <h1>안녕 난 App야</h1>
      {/* 라우터의 기준이 되는 코드 */}
      {/* exact : 정확하게 주소가 매칭이 될 때 끌고 오겠다 */}
      <Route exact path='/' component={Bpp}/>
      <Route exact path='/cpp' component={Cpp}/>

      {/* 뭔가를 던져주면 pm이 받겠다 */}
      <Route exact path='/dpp/:pm' component={Dpp}/>

      <Route exact path='/epp' component={Epp}/>
      <Route exact path='/fpp/:pm' component={Fpp}/>
    </div>
  );
};

const Bpp = () => {
  return (
    <div>
      <h1>안녕 난 Bpp야</h1>
    </div>
  );
};

const Cpp = () => {
  return (
    <div>
      <h1>안녕 난 Cpp야</h1>
    </div>
  );
};

// http://localhost:3000/dpp/hongil
// 인수 전달
// {match} : 지정되어있는 인수
const Dpp = ({match}) => {
  console.log(match);
  console.log(match.params.pm);
  return (
    <div>
      <h1>안녕 난 Dpp야 : {match.params.pm}</h1>
    </div>
  );
};

// http://localhost:3000/epp?name=hongil&age=26
// GET 방식 : ?name=홍길동 일때 홍길동 받아오기
const Epp = ({location}) => {
  console.log(location.search)
  const n = querystring.parse(location.search)
  console.log(n)
  return (
    <div>
      <h1>안녕 난 Epp야 : {n.name}은 {n.age}살</h1>
    </div>
  );
};

// http://localhost:3000/fpp/tiger?name=hongil&age=26
const Fpp = ({match, location}) => {
  console.log(match);
  console.log(location.search)
  const n = querystring.parse(location.search)
  return (
    <div>
      <h1>안녕 난 Fpp야 : {match.params.pm}와 함께하는 {n.name}은 미운 {n.age}살</h1>
    </div>
  );
};

export default Root;

 

Link : 주소창에 주소를 대신 쳐주는 역할 

import React, { Component } from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import querystring from 'query-string';

class Root extends Component {
  render() {
    return (
      <div>
        <BrowserRouter>
        <App/>
        </BrowserRouter>
      </div>
    );
  }
};

// 라우터 장비
const App = () => {
  return (
    <div>
      {/* Link는 주소창에 주소를 대신 쳐주는 역할 */}
      <Link to='/gpp'><h1>Link1</h1></Link>
      <Route exact path='/gpp' component={Gpp}/>

      <Link to='/hpp/lion?name=hongil&age=26'><h1>Link2</h1></Link>
      <Route exact path='/hpp/:pm' component={Hpp}/>
    </div>
  );
};

// http://localhost:3000/gpp
const Gpp = () => {
  return (
    <div>
      <h1>안녕 난 Gpp야</h1>
    </div>
  );
};

// http://localhost:3000/hpp/tiger?name=hongil&age=26
const Hpp = ({match, location}) => {
  console.log(match);
  console.log(location.search)
  const n = querystring.parse(location.search)
  return (
    <div>
      <h1>안녕 난 Hpp야 : {match.params.pm}와 함께하는 {n.name}은 고운 {n.age}살</h1>
    </div>
  );
};

export default Root;

 

- Link안에 넣을 값을 변수로 지정해서 넣기

  - ` ` (백틱)을 사용해서 ${ } 사이에 변수 넣어서 설정

import React, { Component } from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import querystring from 'query-string';

class Root extends Component {
  render() {
    return (
      <div>
        <BrowserRouter>
        <App/>
        </BrowserRouter>
      </div>
    );
  }
};


// 라우터 장비
const App = () => {
  const a = 'cat';
  const name = 'hongil';
  const age = '26';

  const s = `/ipp/${a}?name=${name}&age=${age}`;
  return (
    <div>
      <h1>안녕 난 App야</h1>
      <Link to={s}><h1>Link3</h1></Link>
      <Route exact path='/ipp/:pm' component={Ipp}/>
    </div>
  );
};

// http://localhost:3000/ipp/cat?name=hongil&age=26
const Ipp = ({match, location}) => {
  console.log(match);
  console.log(location.search)
  const n = querystring.parse(location.search)
  return (
    <div>
      <h1>안녕 난 Ipp야 : {match.params.pm}와 함께하는 {n.name}은 미운 {n.age}살</h1>
    </div>
  );
};

export default Root;

 

- 버튼을 사용해서 Link 사용

import React, { Component } from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import querystring from 'query-string';

class Root extends Component {
  render() {
    return (
      <div>
        <BrowserRouter>
        <App/>
        </BrowserRouter>
      </div>
    );
  }
};


// 라우터 장비
const App = () => {
  return (
    <div>
      <Link to="/"><button>버튼</button></Link>
    </div>
  );
};

export default Root;