$ yarn add react-router-dom
$ yarn add cross-env --dev
cross-env : 프로젝트에서 NODE_PATH 를 사용하여 절대경로로 파일을 불러오기 위하여 환경 변수를 설정 할 때 운영체제마다 방식이 다르므로 공통적인 방법으로 설정 할 수 있게 해주는 라이브러리
추후 서버사이드 렌더링을 위해 별개의 디렉토리 생성
(서버사이드 렌더링을 할 때에는 서버 전용 라우터를 써야함)
여기서 라우터를 설정
"scripts": {
"start": "cross-env NODE_PATH=src react-scripts start",
"build": "cross-env NODE_PATH=src react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
params 사용
라우트로 설정한 컴포넌트는 3가지의 props를 전달 받는다.
'url 쿼리'를 다루기 위한 라이브러리
$ yarn add query-string
<a href...>foo</a>를 이용하면 새로고침이 되므로 권장하지 않음 => link컴포넌트를 사용한다.
//Menu.js
import React from 'react';
import { Link } from 'react-router-dom';
const Menu = () => {
return (
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/about/foo">About Foo</Link></li>
</ul>
<hr/>
</div>
);
};
export default Menu;//style을 주고싶으면 Navelink를 쓴다.
//활성화 되었을 시 스타일 : activeStyle , class지정은 activeClassName
import React from 'react';
import { NavLink } from 'react-router-dom';
const Menu = () => {
const activeStyle = {
color: 'green',
fontSize: '2rem'
};
return (
<div>
<ul>
<li><NavLink exact to="/" activeStyle={activeStyle}>Home</NavLink></li>
<li><NavLink exact to="/about" activeStyle={activeStyle}>About</NavLink></li>
<li><NavLink to="/about/foo" activeStyle={activeStyle}>About Foo</NavLink></li>
</ul>
<hr/>
</div>
);
};
export default Menu;
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent