TIL 29 | React Router

라우팅이란?

url 주소에 따라 다른 view를 보여주는 것이다. 리액트는 이런 기능이 내장되어 있지 않기 때문에 가장 인기있는 Third-party Library인 React-router를 사용해보자.

Route Component

npm 또는 yarn으로 리액트 라우트 설치 후 index.js와 같은 위치에 Routes.js 파일을 생성해준다.

//Route.js

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from 'react-router-dom';

import Login from './pages/Login/Login';
import List from './pages/List/List';
import Detail from './pages/Detail/Detail';

class Routes extends React.Component {
  render() {
		return (
	    <Router> // or <BrouserRouter>
	      <Switch>
			<Route exact path="/" component={Login}/>
	        <Route exact path="/list" component={List} />
	        <Route exact path="/detail" component={Detail} />
	      </Switch>
	    </Router>
	  )
	}
}

export default Routes;

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './Routes';
import "./styles/reset.scss";

ReactDOM.render(<Routes />, document.getElementById('root'));

Route 이동 방법

<Link> 컴포넌트 사용

• DOM에서 <a>로 변환된다. 하지만 외부 사이트로 이동시키는 a태그와 달리 Link는 프로젝트 내에서 페이지를 전환시켜준다.
• 클릭시 바로 이동 구현

//Login.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import './Login.scss';

class Login extends Component {
	render() {
    	return(
        	<>
            </>
        )
   	}
}

export default Login;

withRouterHOC(higher order component) 사용

• onClick 등 이벤트 사용
• this.props.history(route정보)에 접근해 이동
• 추가 로직 있을 경우 유용

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

class Login extends Component {

  goToListPage = () => {
    this.props.history.push('/list');
  }

  render() {
    return (
      <div>
        <button
          className="loginBtn"
          onClick={this.goToListPage}
        >
          로그인
        </button>
      </div>
    )
  }
}

export default withRouter(Login); //주의