[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

React Router: Declarative Routing for React

 

 

영어, 중국어 공부중이신가요?

홈스쿨 교재. 한 권으로 가족 모두 할 수 있어요!

한GLO 미네르바에듀 : 네이버쇼핑 스마트스토어