react_router

Routing이란?

다른 주소에 따라 다른 뷰를 보여주는 것을 라우팅이라고 한다.

React에서 라우팅하기

React 자체에는 이 기능이 내장되어있지 않기 때문에 우리가 직접 브라우저의 API를 사용하고 상태를 설정하여 다른 뷰를 보여주어야 한다.
react-router 설치하기
- npm i react-router-dom

react-router

react-router는 써드파티 라이브러리로서, 공식 라우팅 라이브러리는 아니지만 리액트 라우팅에 가장 많이 사용되고 있는 라이브러리이다.
클라이언트 사이드에서 이뤄지는 라우팅을 간단하게 해준다.
서버 사이드 렌더링도 도와주는 도구들이 함께 딸려온다.

react-router에서 제공하는 기본 컴포넌트

<BrowserRouter /> : HTML5 history API를 사용하여 주소를 관리하는 라우터
<Route /> : 요청 경로와 렌더링할 컴포넌트 설정
<Switch /> : 하위에 라우터 중 하나를 선택
- 라우트들을 이 컴포넌트에 감싸면 매칭되는 첫번째 라우트만 보여주고 나머지는 보여주지 않는다.
- switch를 사용하면 exact를 사용하지 않아도 됨
<Redirect /> : 요청 경로를 다른 경로로 리다이렉션
예시 코드

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { Home, About, Posts } from 'pages';
import Menu from 'components/Menu';

function App() {
    return (
        <BrowserRouter>
            <Switch>
                <Route exact path="/" component={Home}/>
                <Route path="/about/:name" component={About}/>
                <Route path="/about" component={About}/>
                <Redirect path="*" to="/" />
            </Switch>
        </BrowserRouter>
    );
}

export default App;