BrowserRouter를 이용한 웹 기반 애플리케이션 라우팅 구현

react-router-dom 패키지에서 제공하는 BrowserRouter를 이용해서 웹 기반 애플리케이션에서의 라우팅을 구현해 보겠습니다. 

 

[참고] https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom

 

 

 

#1 앱 생성

C:\react> npx create-react-app menu

 

 

#2 react-router-dom 설치

C:\react\menu> npm install react-router-dom

 

 

#3 Home.js 생성

import React from 'react';

const Home = () => {
    return (
        <div>
            <h1>Home.js</h1>
        </div>
    );
}

export default Home;

 

 

#4 Contact.js 생성

import React from 'react';

const Contact = () => {
    return (
        <div>
            <h1>Contact.js</h1>
        </div>
    );
}

export default Contact;

 

 

#5 Menu.js 생성

Link 컴포넌트를 이용해서 "/", "/contact", "/links" 링크를 제공하며, 링크를 클릭하면 Route 컴포넌트에 정의된 컴포넌트가 렌더링됩니다. 이때, render 속성을 이용해서 직접 렌더링을 정의할 수도 있습니다.

import React from 'react';
import './App.css';
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom';
import Contact from './Contact.js';
import Home from './Home.js';

function Menu() {
    return (
        <div className="App">
            <BrowserRouter>
                <div>
                    <Link to="/">Home</Link>{' '}
                    <Link to="/contact">Contact</Link>{' '}
                    <Link to="/links">Links</Link>{' '}
                    <Switch>
                        <Route exact path="/" component={Home} />
                        <Route path="/contact" component={Contact} />
                        <Route path="/links" render={ () => <h1>Links</h1> } />
                        <Route render={ () => <h1>Page not found</h1>} />
                    </Switch>
                </div>
            </BrowserRouter>
        </div>
    )
}

export default Menu;

 

 

#6 브라우저를 통해 결과 확인