Page 34 -

페이지 컴포넌트도 다 만들었습니다. 이제 App 컴포넌트에서 라우트 설정을 해 보세요.

App.js
import React from 'react';
import { Route } from 'react-router-dom';
import Menu from './components/Menu';
import RedPage from './pages/RedPage';
import BluePage from './pages/BluePage';

const App = () => {
return (
<div>
<Menu />
<hr />
<Route path="/red" component={RedPage} />
<Route path="/blue" component={BluePage} />
</div>
);
};

export default App;

다음으로 BrowserRouter를 사용하여 프로젝트에 리액트 라우터를 적용하세요.

index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);

serviceWorker.unregister();

544

리액트를 다루는 기술_개정판(본문)최종출력용.indb 544 2019-08-20 오전 11:03:33