React는 SPA(Single Page Application)입니다.
react-router-dom은 SPA에서 화면 전환을 위해 사용하는 모듈입니다.
npm create-react-app react-router-tutorial
cd react-router-tutorial
npm react-router-dom
Entry point
로 지정되어있는 파일입니다.
import React from 'react';
import ReactDom from 'react-dom';
import Router from './router';
ReactDom.render(<Router />, document.getElementById('root'));
라우팅을 위해 BrowserRouter
태그로 감싸줍니다.
route
컴포넌트의 path
속성은 경로로 접속 시 component
속성의 컴포넌트를 보여주게 됩니다.
exact
속성은 path
속성의 경로와 정확히 일치할 때만 컴포넌트를 보여줍니다.
import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import Menu from '../components/menu';
import Home from '../pages/home';
import Login from '../pages/login';
function index() {
return (
<BrowserRouter>
<Menu />
<Route exact path="/login" component={Login} />
<Route path="/" component={Home} />
</BrowserRouter>
);
}
export default index;
SPA 에서는 <a href="#">somewhere</a>
같은 형식을 사용하면 안됩니다.
왜냐하면 a tag
는 페이지 이동 시 새로고침을 해버리기 때문에 여기서는 a tag
를 사용하지않고 react-router에 있는 Link
컴포넌트를 이용합니다.
import React from 'react';
import { Link } from 'react-router-dom';
function index() {
return (
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/login">login</Link>
</li>
</ul>
<hr />
</div>
);
}
export default index;
화면 전환을 가시적으로 볼 수 있게 간단한 컴포넌트를 작성해줍니다.
import React from 'react';
function index() {
return <div>home</div>;
}
export default index;
import React from 'react';
function index() {
return <div>login</div>;
}
export default index;
/
경로로 이동 시
/login
경로로 이동 시
혹시 경로를 직접 입력해 이동 할 때 “Cannot GET /login”
같은 오류를 반환하게 된다면 webpack.config.js
을 수정해주면 됩니다.
devServer: {
historyApiFallback: true
},
이로써 간단하게 react-router-dom을 적용해보았습니다. 더 많은 내용과 심화적인 내용을 확인하고 싶으시면 공식 웹사이트를 확인해보시면됩니다. 읽어주셔서 감사합니다:)