react

• 같은 자리에 다른 페이지를 넣어주는 기능을 하는 것이 routes라고 한다.

• root가 되는 최상위에서 다른 페이지를 넣어달라고 명령하므로, 아래와 같은 코드를 입력해주어야 한다.

index.js파일의 코드다.

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

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

Routes.js의 코드

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


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

export default Routes;

이 코드들이 있는 이유,

1. 슬래시 메인이라는 경로를 갖고 있고,
2. 홈 경로는 무조건 슬래쉬이다. /
3. 중괄호는 자바스크립트를 시작한다는 의미하며,
4. 경로는 기본적으로 소문자로 쓴다.
5. exact는 페이지에 화면이 하나만 나오게 해준다.
   따라서, exact를 쓰지 않을 경우 main페이지와 login페이지가 이동되지 않는다.
6. route로 묶는 애들은 주로 pages로 들어감.
7. pages는 경로로 지정해서 보는 것들을 입력하면된다 (경로)

• 따라서, 흐름상
  <Route exact path 개수는 위에 import해준 개수와 같아야한다.