React Router 사용 및 State 전송 정리

React를 사용하다보면 page끼리 데이터를 주고 받아야 할 경우가 생긴다. 그 때마다 까먹고 예전에 작성했던 코드에서 찾다가 블로그에 정리할 필요성을 느껴서 업로드한다.

Route 이동

• 기본 설정

//App.js
import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
import MainPage from '../src/pages/main';
import Page1 from '../src/pages/page1';
import Page2 from '../src/pages/page2';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Switch>
          <Route exact path="/" render={() => <MainPage />} />
          <Route exact path="/page1" render={() => <Page1 />} />
          <Route exact path="/page2" render={() => <Page2 />} />
        </Switch>
      </div>
    );
  }
}

export default App;

• Link, NavLink Component 사용

//MainPage.js
import React from 'react';
import { Link, NavLink } from 'react-router-dom';

function MainPage() {
  const activeStyle = {
    '스타일 설정'
  };
  
  return (
    <div>
      <button>
        <Link to="/page1">
          Page1
        </Link>
      </button>
      <button>
        <NavLink exact to="/page2" activeStyle={activeStyle}>
          Page2
        </NavLink>
      </button>
    </div>
  );
}

export default MainPage;

Link와 NavLink 차이는 URL이 활성화 될 시 스타일 적용 여부

• withRouter HoC 이용

import React from 'react';
import { withRouter } from 'react-router-dom';

function Page1() {
  return(
    <button onClick={() => 
      this.props.history.push({
        pathname : "/",
      })
    }>
      Main Page로 이동
    </button>
  );
}

export default withRouter(Page1)

history 객체의 push 메소드를 사용해 이동한다.

State 전송

• Class Component의 경우

//state를 보내는 Component
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class GiveComponent extends Component {
  return(
    <button onClick={() => 
      this.props.history.push({
        pathname : "보낼 페이지 주소", 
        state : { 
          data : 'This is data'
        },
      })
    }>
      전송
    </button>
  );
}

export default withRouter(GiveComponent);

//state를 받는 Component
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class TakeComponent extends Component {
  const data = this.props.location.state.data;

  return(
    <p>{data}</p>
  );
}

export default withRouter(TakeComponent);

• Functional Component

//state를 보내는 Component
import React from 'react';
import { useHistory } from 'react-router-dom';

function GiveComponent() {
  const history = useHistory();
  return(
    <button onClick={() => 
      history.push({
        pathname : "보낼 페이지 주소", 
        state : { 
          data : 'This is data'
        },
      })
    }>
      전송
    </button>
  );
}

export default GiveComponent;

//state를 받는 Component
import React from 'react';
import { useLocation } from 'react-router-dom';

function TakeComponent() {
  const data = useLocation().state.data;

  return(
    <p>{data}</p>
  );
}

export default TakeComponent;

Class component의 경우는 withRouter HoC를 사용하고 functional component의 경우는 withRouter를 사용해도 되지만 useHistory, useLocation hook을 사용하여 state를 전송하면 되겠다.