[React] react-router-dom

🌱 react-router-dom 설치하기

npm install react-router-dom

 

 

🌱 react router 사용하기

📌 react-router-dom import

//app.js
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';

•  react-router-dom의 'browserRouer, Route, Switch'를 임폴트, 이때 browserRouer는 Router라는 이름으로 사용

 

 

 

📌 페이지 생성하기

1. src/routes 폴더 생성

components 폴더는 원래 존재하는 것이 아닌, 임의로 생성한 폴더이니 존재하지 않아도 무관

2. 폴더 안에 compo.js 파일 생성

import React from 'react';

class Compo extends React.Component{
    render(){
        return(
            <div>Compo</div>
        )
    }
}

export default Compo;

 

위와 같이 내용을 작성

 

 

📌 router 사용하기

//app.js
import Compo from './routes/compo';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" component={Compo}/>
      </Switch>
    </Router>
  );
}

export default App;

'/'라는 경로의 요청을 받게 되면 Compo 컴포넌트가 맵핑되어 Compo.js의 내용이 응답으로 반환

 

위와 같은 형식으로 여러 url 요청 별로 라우팅을 지정해 줄 수 있음

 

📌 주의할 점!

- <Route path='/' ...>이 다른 path들 보다 앞에오게 될 경우, '/' 경로가 계속 매핑된다.

- '/dashboard'라는 요청이 들어오게 되면 path='/dashboard'와 path='/'의 내용이 모두 매핑되어 내용이 2개가 출력되기 때문에 <Route path='/' ...> 는 꼭 가장 마지막으로 적을 것