React #4

SPA(Single Page Application)

리액트에서는 하나의 파일에 여러개의 페이지를 보여줌

Routing

다른 경로에 따라 다른 화면을 보여줌
-> 리액트의 기본 기능 아니라 React-router 라이브러리 설치 필요

import React from 'react';
import {
	
}
class Routesextends React.Component{
	render(){
		return (
			<Router>
              <Switch>
                <Route exact path="/login" component={Login} />
                <Route exact path="/list" component={List} />
                <Route exact path="/detail" component={Detail} />
              </Switch>
             </Router>
)	
}
}
export default Routes;               

exact path 뒤의 경로로 가야 페이지를 보여줌

Page이동

1. <Link> => 클릭 시 바로 이동

import { Link } from 'react-router-dom';
<Link to="/list">리스트로 이동</Link> 

• react-router-dom 에서 제공하는 <Link> 컴포넌트는 DOM에서 <a> 로 변환(Compile)
  ⚠️ <a> 외부 사이트로 이동하는 경우 / <Link> 프로젝트 내에서 페이지 전환하는 경우

2. withRouterHOC => 페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우

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

goTOMain = () => {
	this.props.history.push('/main');
}

export default withRouter(Login);