[리액트] react-router-dom v6로 업데이트된 후 달라진점

라우터 버전 업그레이드하기

npm

npm install react-router-dom@6

 

yarn

yarn upgrade react-router-dom@6

 

1. Switch 대신 Routes 사용 그리고 Route를 항상 Routes로 감싸주기

Route 컴포넌트를 감싸는 부모요소 Switch 대신 직관적인 이름을 가진 Routes로 바뀌었다. v5에서는 Route 컴포넌트를 Switch 컴포넌트로 반드시 감싸지 않아도 괜찮았지만 v6에서는 Route가 단 한개여도 반드시 부모 컴포넌트 Routes로 감싸주어야한다.

Switch란?

Switch는 여러 Route들을 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링시켜준다. Switch를 사용하면, 아무것도 일치하지 않았을때 보여줄 Not Found 페이지를 구현할수도 있다.

예시

// v5
<Switch>
  <Route path='/' component={Home} exact />
  <Route path='/cat' component={Cat} />
  <Route path='/dog' component={Dog} />
</Switch>

// v6
<Routes>
  <Route path='/' element={<Home/>} />
  <Route path='/cat' element={<Cat/>} />
  <Route path='/dog' element={<Dog/>} />
</Routes>

 

2. Route에 children이나 component가 사라지고 element 사용

해당 주소에 보여주고 싶은 컴포넌트를 연결할때 v5에서는 Route의 children으로 연결하거나 component의 props로 받아주었다. v6부터는 children으로 연결할 수 없고 component 대신 element가 사용된다.

Route 컴포넌트로 특정 주소에 컴포넌트 연결하는 2가지 방법 (v5)

방법 1: Route의 children으로

<Route> 컴포넌트가 해당 컴포넌트를 children으로 감싸고 있는 형태라면 props가 없기 때문에 사용하고 싶은 훅을 import한다.

<Route path='주소'>
  <보여줄컴포넌트/>
</Route>

방법 2: component의 props로

props를 사용하기 위해서는 <Route> 컴포넌트에 props값으로 해당 컴포넌트를 전달해줘야한다.

<Route path='주소' component={보여줄컴포넌트} />

Route 컴포넌트로 특정 주소에 컴포넌트 연결하는 2가지 방법 (v6)

해당 주소에 보여주고 싶은 컴포넌트를 element 값으로 넣어준다. 이때 컴포넌트를 JSX 문법으로 적어주어야 한다.

<Route path='주소' element={<보여줄컴포넌트/>} />

예시

 // v5
 <div className="App">
  <Route path='/'>
    <Home />
  </Route>
  <Route path='/cat'>
    <Cat />
  </Route>
  <Route path='/dog'>
    <Dog />
  </Route>
</div>

// v5
<div className="App">
  <Route path='/' component={Home} exact />
  <Route path='/cat' component={Cat} />
  <Route path='/dog' component={Dog} />
</div>

// v6
<div className="App">
  <Route path='/' element={<Home/>} />
  <Route path='/cat' element={<Cat/>} />
  <Route path='/dog' element={<Dog/>} />
</div>

 

3. exact 옵션 삭제

v5에서 경로를 설정할때 앞부분만 일치해도 매칭되는 것으로 간주되었기 때문에 정확히 라우트를 일치시키기 위해 Route에 exact 옵션을 사용했다. v6에서는 경로와 정확히 매칭되는 컴포넌트를 불러오기 때문에 더 이상 exact 옵션이 필요가 없어졌다. 만약 하위경로에 여러 라우팅을 매칭시키고 싶다면 URL 뒤에 /*을 사용하여 일치시킬 수 있다

예시

// v5
// exact를 사용하지 않으면 / 경로에서 /cat과 /dog 경로일때 보여지는 컴포넌트도 함께 보였다
<div className="App">
  <Route path='/' component={Home} exact />
  <Route path='/cat' component={Cat} />
  <Route path='/dog' component={Dog} />
  <Route path='/plant/' component={Plant} />
  <Route path='/plant/flower' component={Flower} />
</div>

// v6
<div className="App">
  <Route path='/' element={<Home/>} />
  <Route path='/cat' element={<Cat/>} />
  <Route path='/dog' element={<Dog/>} />
  <Route path='/plant/*' element={<Plant/>} />
  <Route path='/plant/flower' element={<Flower/>} />
</div>

 

4. 존재하지 않는 페이지 작성법

// v5
<Switch>
  <Route component={NotFound} />
</Switch>

// v6
<Routes>
  <Route path='/*' element={<NotFound/>} />
</Routes>

 

5. <NavLink>에서 activeStyle, activeClassName 대신 일반 className과 style 사용

<NavLink>란?

<NavLink> 컴포넌트는 <Link> 컴포넌트처럼 페이지를 이동하는 컴포넌트다. <NavLink> 컴포넌트는 특정 링크에 스타일을 넣어주는 점에 있어서 <Link> 컴포넌트와 차이가 있다. <NavLink> 컴포넌트에는 activeStyle과 activeClassName 속성이 있는데 브라우저의 현재 URL과 <NavLink> 컴포넌트에 to의 URL이 일치할 때 activeStyle과 activeClassName이 활성화 되고 일치하지 않으면 비활성화가 된다.

// v5
<NavLink activeClassName={ classes.active } to='/welcome'>Welcome</NavLink>
<NavLink activeStyle={{ color: "blue" }} to='/products'>Products</NavLink>

// v6
<NavLink className={( navData ) => navData.isActive ? classess.active : ''} to='/welcome'>Welcome</NavLink>
<NavLink style={({ isActive }) => ({ color: isActive ? 'blue' : 'black' })} to='/products'>Products</NavLink>

 

6. match 객체 대신 useParams 사용

URL 파라미터에 접근하기 위해 v5에서는 props에서 받아온 match 객체를 사용하거나 useParams를 사용했다. v6부터는 match 객체를 사용할 수 없고 useParams로만 URL 파라미터에 접근할 수 있다.

 

URL 파라미터에 접근하기 (v5)

방법 1: props로 URL 파라미터에 접근하기

App.js (component의 props로 라우터 적용했을때)

props를 사용하기 위해서는 컴포넌트에 props값으로 해당 컴포넌트를 전달해줘야 한다. 

import { Route } from 'react-router-dom';
import Home from './Home';
import Cat from './Cat';
import Dog from './Dog';

function App() {
  return (
    <div className="App">
      <Route path='/' component={Home} exact />
      <Route path='/cat/:cat_name' component={Cat} />
      <Route path='/dog' component={Dog} />
    </div>
  );
}

export default App;

Cat.js

전달받은 props를 콘솔창에 출력한다.

import React from 'react';

const Cat = props => {
  console.log(props);

  return (
    <>
      <div>고양이 화면이에요.</div>
    </>
  );
};

export default Cat;

콘솔창

주소창에 domain/cat/samsaek이라고 입력했을때 props는 아래의 정보를 가져온다. 즉 동적 URL 파라미터인 cat_name을 사용하기 위해서는 props.match.params에 접근해야한다.

props.match.params로 props로 받아온 URL 파라미터 접근하기

console.log(props.match.params);

 

URL 파라미터에 접근하기 (v5, v6)

방법 2: useParams 훅으로 URL 파라미터에 접근하기

App.js (Route의 children으로 라우터 적용했을때)

<Route> 컴포넌트가 해당 컴포넌트를 children으로 감싸고 있는 형태라면 props를 사용할 수 없으므로 useParams 훅을 사용해 URL 파라미터에 접근해준다.

import { Route } from 'react-router-dom';
import Home from './Home';
import Cat from './Cat';
import Dog from './Dog';

function App() {
  return (
    <div className="App">
      <Route path='/' exact>
        <Home />
      </Route>
      <Route path='/cat/:cat_name'>
      	<Cat />
      </Route>
      <Route path='/dog'>
        <Dog />
      </Route>
    </div>
  );
}

export default App;

Cat.js

웹브라우저 주소창에 도메인/cat/samsaek이라고 접속하면 useParams 객체에 cat_name이라는 key값 samsaek이라는 value가 할당된다.

import React from 'react';
import { useParams } from 'react-router-dom';

const Cat = () => {
  const cat_name = useParams();
  console.log(cat_name);

  return (
    <>
      <div>고양이 화면이에요.</div>
    </>
  );
};

export default Cat;

콘솔창

usePrarms 훅을 사용하면 훨씬 간단하게 URL 파라미터에 접근할 수 있다.

 

7. history, useHistory 대신 useNavigate 사용