Router를 이용해 URL로 접속했을때 어떤 컴포넌트로 가는지 정의를 했다.
이제는 URL로 접속했을때 존재하지 않는 URL에 대해서 처리가 필요하고,
단 하나의 라우트만 rendering 하도록 구현이 필요하다.
import React from 'react';
import { Route, Link, Switch } from 'react-router-dom';
import './App.css';
import Home from './components/Home';
import Search from './components/Search';
import Locations from './components/Locations';
import HistorySample from './components/HistorySample';
const App = () => {
return (
<div>
<Link to="/">홈</Link>
<Link to="/search">검색</Link>
<Link to="/locations">위치</Link>
<Link to="/history">히스토리</Link>
<Switch>
<Route path="/" component={Home} exact={true}></Route>
<Route path="/search" component={Search}></Route>
<Route path="/locations" component={Locations}></Route>
<Route path="/history" component={HistorySample}></Route>
<Route
render={({ location }) => (
<div>
<h2> 이 페이지는 존재하지 않는다.</h2>
<p>{location.pathname}</p>
</div>
)}></Route>
</Switch>
</div>
);
};
export default App;
- 위 코드에서
path
를 명시하지 않으면 해당하는path
가 없을때 해당 Route로 렌더링이 된다. search, locations, history
의 파라미터 URL이 아니라면이 페이지는 존재하지 않는다.
의 결과가 나온다.
'Web 개발 > React' 카테고리의 다른 글
[React] REST API 개발 전에 JSONPlaceholder 이용해 JSON 데이터 샘플 호출해서 가져오기 (0) | 2020.02.10 |
---|---|
[React] NavLink 를 이용해 현재 경로와 Link가 일치할때 Style을 주자 (+코드 예제) (0) | 2020.02.09 |
[React] WithRouter 언제 사용? 사용하는 방법 (+ 코드예제) (0) | 2020.02.09 |
[React] TypeError: Cannot read property 'createElement' of undefined (0) | 2020.02.09 |
[React] 서브 라우트 (sub route) 정의하는 방법 (+코드 예제) (0) | 2020.02.09 |