[React.js] 단숨에 라우팅 이해하기 :: Routing

리액트로 여러개의 페이지를 구축할 수 있어요.
주소창에 /admin, /user 등을 입력하면 서로 다른 페이지를 보여주는거죠.
그걸 라우팅이라고 불러요.

우선 간단하게 해시를 이용할께요.
주소창에 /#a를 입력하면 A 컴포넌트를 보여주고 /#b를 입력하면 B 컴포넌트를 보여주면 될 것 같네요.

import { useState } from 'react';

function A() {
    return <h1>A 페이지</h1>;
}

function B() {
    return <h1>B 페이지</h1>;
}

function App() {
    const [hash, setHash] = useState(document.location.hash);

    function onHashChanged() {
        setHash(document.location.hash);
    }
    window.addEventListener('hashchange', onHashChanged, false);

    return <div>{hash === '#a' ? <A /> : <B />}</div>;
}

export default App;

간단하죠.
그런데 해시를 이용하는건 좀 멋지지 않네요.

리액트 라우터(react-router)라는 라이브러리를 이용할께요.

npm install --save react-router-dom

<Router> 아래에 <Route>를 넣기만 하면 돼요.
path는 주소창에 입력하는 경로고, component는 보여줄 컴포넌트에요.

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function A() {
    return <Link to="/b">B 페이지로 이동</Link>;
}

function B() {
    return <Link to="/a">A 페이지로 이동</Link>;
}

function App() {
    return (
        <div>
            <Router>
                <Route path="/a" component={A} />
                <Route path="/b" component={B} />
            </Router>
        </div>
    );
}

export default App;

Link는 <a> 같은거에요.
히스토리 관리도 되니 브라우저 뒤로, 앞으로 버튼을 눌러보세요.

리액트 라우터에 대해 더 알고 싶다면 아래 페이지를 방문하세요.
https://reactrouter.com/web/guides/quick-start