React | Router 요약

Create React App (CRA) 과 가장 인기있는 routing solution인 react-router 를 조합하여 routing 로직을 구현할 것

1. React 개발환경 세팅

1️⃣ npm 설치
2️⃣ CRA 설치
3️⃣ 프로젝트 내에서 CRA 실행
4️⃣ npm start

2. Routes Component & Scss

1️⃣ react-router 설치
2️⃣ Routes 컴포넌트 구현
(<Link> / this.props.history.push())
3️⃣ scss 설치

1. react-router 설치

npm install react-router-dom --save

2. Routes 컴포넌트 구현하기

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

import Login from './pages/Login/Login';
import Signup from './pages/Signup/Signup';
import Main from './pages/Main/Main';

class Routes extends React.Component {
  render() {
    return (
      <Router>
    <Nav />
        <Switch>
          <Route exact path="/" component={Login} />
      <Route exact path="/signup" component={Signup}/>
          <Route exact path="/main" component={Main} />
        </Switch>
    <Footer />
      </Router>
    )
  }
}

export default Routes;

3. index.js

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

• 설치 직후에는 App 컴포넌트가 화면에 출력된다.
• routing 기능을 적용하기 위해서는 <App /> 컴포넌트 대신에 *<Routes /> 컴포넌트로 변경해야 한다. *

4. Route 이동하기

Route 이동 방법에는 2가지가 있다.
1. <Link> 컴포넌트 사용하는 방법
2. this.props.history.push()로 구현하는 방법
위 2가지 방법에 대한 내용은 [React | Routes Component & Sass 참고]