React Router 리액트 라우터1 { Route, Switch }

1. react-router-dom@5 설치

npm install react-router-dom@5

yarn add react-router-dom@5

2. index.js에 설정 추가

import를 선언해 주고, <App>을 <BrowerRouter>로 감싸준다.

import { BrowserRouter } from 'react-router-dom';

<BrowserRouter>
   <App />
</BrowserRouter>

3. 'url/'와 'url/A'로 페이지를 나눠보자.

3.1. app.js에 import 먼저 선언

import { Route, Switch } from 'react-router-dom';

3.2 <Route>를 이용해 분기 처리

<Route>의 path="" 안에 원하는 경로명을 지정해준다.

<Route path='/'>
   <p>기본 페이지입니다.</p>
</Route>
<Route path='/A'>
   <p>A 페이지입니다.</p>
</Route>

결과:

http://localhost:3001/	기본 페이지입니다.
http://localhost:3001/A	기본 페이지입니다. A 페이지 입니다.

위 결과를 보면, A페이지에서도 "기본 페이지입니다." 문구가 노출된다. 그 이유는 path="/" 때문이다. "/A"에도 "/"가 들어가 있기 때문에 "/"에 접속하고 있다고 판단하고 "기본 페이지입니다." 문구를 노출시키는 것이다.

 

오직 "/"에서만 노출시키고 싶다면 "exact" 코드를 추가해주면 된다.

<Route exact path='/'>
   <p>기본 페이지입니다.</p>
</Route>

<Route>안에 컴포넌트를 넣고 싶을 때엔, 아래의 2가지 방법이 있다.

<Route path="/경로" component={ 컴포넌트명 }></Route>

<Route path="/경로">
   <컴포넌트명 />
</Route>

4. 모든 경로에 노출시키고자 할 땐, path="/:작명"

그 어떤 문자도 받겠다는 URL작명법으로, path="/:작명"으로 지정하면 "/"으로 시작하는 모든 경로에서 해당 내부 컴포넌트가 노출된다.

<Route exact path='/'>
   <p>기본 페이지입니다.</p>
</Route>
<Route path='/A'>
   <p>A 페이지입니다.</p>
</Route>
<Route path='/:id'>
   <p>정해진 경로 외의 페이지입니다.</p>
</Route>

결과:

http://localhost:3001	기본 페이지입니다.
http://localhost:3001/	기본 페이지입니다. 정해진 경로 외의 페이지입니다.
http://localhost:3001/A	A 페이지 입니다. 정해진 경로 외의 페이지입니다.
http://localhost:3001/아무개	정해진 경로 외의 페이지입니다.

5. 매칭된 <Route> 전부 보여주지 말고 하나만 보여주고 싶을 땐, { Switch }

<Switch>로 감싸진 <Route>들은, 여러개가 매칭이 되어도 가장 먼저 매칭된 맨 위의 <Route>하나만 보여준다.

<Switch>
   <Route exact path='/'>
      <p>기본 페이지입니다.</p>
   </Route>
   <Route path='/A'>
      <p>A 페이지입니다.</p>
   </Route>
   <Route path='/:id'>
      <p>정해진 경로 외의 페이지입니다.</p>
   </Route>
</Switch>

결과:

http://localhost:3001/	기본 페이지입니다.
http://localhost:3001/A	A 페이지 입니다.
http://localhost:3001/아무개	정해진 경로 외의 페이지입니다.