React

React | Router 요약

2022. 1. 12. 12:00
목차
  1. 1. react-router 설치
  2. 2. Routes 컴포넌트 구현하기
  3. 3. index.js
  4. 4. Route 이동하기

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 참고]

'React' 카테고리의 다른 글

React | 동적 라우팅  (0) 2022.01.26
React | props와 state  (0) 2022.01.14
React | 로그인 버튼 활성화(React를 이용하여)  (0) 2022.01.13
React | Routes Component & Sass  (0) 2022.01.11
React | CRA + TypeScript + Airbnb style guide 초기세팅  (0) 2022.01.05
  1. 1. react-router 설치
  2. 2. Routes 컴포넌트 구현하기
  3. 3. index.js
  4. 4. Route 이동하기
'React' 카테고리의 다른 글
  • React | props와 state
  • React | 로그인 버튼 활성화(React를 이용하여)
  • React | Routes Component & Sass
  • React | CRA + TypeScript + Airbnb style guide 초기세팅
3jun
3jun
3jun
3jun
3jun
전체
오늘
어제
  • 분류 전체보기 (94)
    • 프로젝트 (5)
    • Web (9)
    • JavaScript (19)
    • React (12)
    • 알고리즘 (31)
    • Git (3)
    • AWS (3)
    • TypeScript (3)
    • CS (2)
    • Error (6)
    • 회고 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • outer environment
  • 백준js
  • react
  • 프로그래머스 코테
  • 백준 js
  • msw
  • state
  • 프로그래머스 js
  • 백준 알고리즘
  • 유효성 로직
  • msw 에러
  • 백준 온라인저지
  • 프로그래머스 코딩테스트 js
  • Promise
  • airbnb style guide
  • 프로그래머스 코딩테스트
  • 백준 코테
  • 자바스크립트
  • this.props.history.push
  • JavaScript

최근 댓글

최근 글

hELLO · Designed By 정상우.
3jun
React | Router 요약
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.