React-Router 설치

1. 설치 명령어 :

npm install react-router-dom --save

react 설치시 자동으로 git과 연결됨

2. 불필요한 파일 삭제 :

src파일에서 App.css / App.js / index.js 제외하고는 삭제

3. 파일 생성 :

src파일에 Routes.js와 테스트하고 싶은 js파일 생성하기 (수업에서는 SignUp.js파일 생성

4. Routes.js 파일 세팅하기

import React from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
그 이외에 import하고 싶은 파일 import하기
오늘의 예시는 App과 SignUp 파일
import App from './App';
import SignUp from './SignUp';

class Routes extends React.Component{
	render(){
    	return(
           <Router>
            <Switch> // 한 경로당 하나의 페이지만 보여주고 싶을 때 switch를 사용
            	<Route exact path="/" component={App} /> // Home이 되는 경로는 "/"로 지정
                <Route path="/signup" component={SignUp} />
            </Switch>
            </Router>
        )
    }
}

export default Routes;

exact path가 뭔지 정확하게 정리하기

• index.js파일에 라우팅을 설정한 컴포넌트로 대치하기
  
  

import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './Routes';

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

Route 이동하기

Link 컴포넌트 사용하는 법

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

class Login extends React.Component {
	render() {
    return(
    	<div>
        	<Link to="/signup">회원가입</Link>
        </div>
    );
    }
}

export default Login;

여기서 Link 컴포넌트는 dom에서 <a> 로 변환되므로 다른 태그를 사용하고 싶다면 Link를 사용하지 않아도 됨.

onClick 이벤트 이용하는 법

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

class Login extends React.Component {
	goToSignup() {
    	this.props.history.push('/signup');
    }
    render() {
    	return (
        	<div>
            	<div 
                class ="btn signup-btn"
                onClick={this.goToSignup.bind(this)}>
                회원가입
                </div>
            </div>
        )
    }
}

export default with Router(Login);

WithRouter와 같이 컴포넌트를 감싸주는 것 : higher-order component(HOC)
이 부분은 react에 충분히 익숙해지고 다시 공부하는 것이 좋음