React 개발환경 세팅하기 - 2. React Router 설치

React 프로젝트에 Router 설치 방법

1. 터미널을 킨다.

2. Router 설치를 희망하는 React프로젝트의 디렉토리로 이동한다.

3. npm install react-router-dom --save 입력한다.

4. 설치한 React 프로젝트 디렉토리를 열어 package.json 파일에 "dependencies" 중 "react-router-dom" 이 있는지 확인해 본다.

끝!

+Router 활용해보기.

src 폴더의 index.js 파일에 Routes.js파일을 생성한 후 Routes컴포넌트를 만들어 연결시킨다.

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./Styles/index.css";
import Routes from "./Routes"; //-> Routes 컴포넌트 연결

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

Routes.js 에 각각의 페이지로 이동할 url주소를 입력해주고 페이지에 해당하는 컴포넌트들을 연결 시켜 준다.

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Main from "./Pages/Main/";
import Login from "./Pages/Login/";

export default class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Main} />
			//=> Main컴포넌트와 연결
          <Route exact path="/login" component={Login} />
            //=> Login컴포넌트와 연결
        </Switch>
      </Router>
    );
  }
}