89 Q&A

89번 예제에 대한 질문을 댓글로 남겨주세요.

 

 

---------------------------- 2021년 11월 08일 ----------------------------

안녕하세요. react-router-dom 패키지 사용시 발생하는 아래 오류들에 대해서 설명드리겠습니다.

 

메시지 1 : Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.

메시지 2 : index.tsx:25 Matched leaf route at location "/" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.

 

1. 오류 원인

 

npm 패키지들은 한 번 배포되고 끝나는 것이 아니라, 개선사항이 생기면 새로운 버전으로 업데이트됩니다.

이때, 문법이 바뀌기도 하는데요. 아래 가이드 문서를 보시면 변경된 문법들이 확인됩니다.

 

https://github.com/remix-run/react-router/blob/main/docs/getting-started/tutorial.md

GitHub - remix-run/react-router: Declarative routing for React

 

올해에 react-router-dom패키지가 버전 6으로 업데이트 되면서, 일부 문법이 변경되었습니다.

예제 소스 > package.json 파일을 열어보시면 아래와 같이 react-router-dom의 패키지 버전이 5.2.0로 적혀 있는데요.

예제 소스를 그대로 다운받아 [npm install] 명령어를 실행하면, package.json에 적힌 5.2.0버전이 설치됩니다.

이렇게 설치하시면 예제 소스 그대로 오류 없이 사용가능합니다.

 "react-router-dom": "^5.2.0",

package.json소스를 활용하지 않고, [npm install react-router-dom] 명령어로 react-router-dom패키지를 단독으로 설치하면, 2021년 11월 8일 시점에는 6.0.1 버전의 패키지 설치됩니다.

 

2. 변경된 문법

 2-1) <Route> 태그는 무조건 <Routes> 태그로 묶어야 한다. 버전 6에서 새로 추가된 <Routes>태그는 기존에 있던
<Switch>태그와 기능은 유사하지만, <Swich>태그와 달리 <Routes>태그는 필수적으로 사용해야 합니다.

 

참고) Swich태그는 예제에서 다루지는 않았지만, 자식 컴포넌트 중 조건(path)에 만족하는 가장 위 줄에 작성된 컴포넌트만 출력하도록 합니다.

 

 2-2) <Route>태그에서 사용하던 component 속성을 element로 변경해 사용해야합니다.

 2-3) 라우팅 대상이 되는 컴포넌트를 element속성에 할당할 때, element{<{ComponetName} /> /> 형식으로 작성해야합니다. 이때, 컴포턴트명(ComponetName)의 첫 글자는 대문자로 작성해야 합니다.

     

# 기존 소스(App.js)

import React, { Component } from 'react';
import { Route } from "react-router-dom";
import reactRouter from './R089_reactRouter'
import reactRouter2 from './R089_reactRouter2'

class App extends Component {
  render () {
    return (
      <div className="App">
        <Route exact path='/' component={reactRouter} />
        <Route exact path='/reactRouter2' component={reactRouter2} />
      </div>
    );
  }
}

export default App;

 

# v6를 사용할 때 소스(App.js)

import React, { Component } from 'react';
import { Routes, Route } from "react-router-dom";
import ReactRouter from './R089_reactRouter'
import ReactRouter2 from './R089_reactRouter2'

class App extends Component {
  render () {
    return (
      <div className="App">
        <Routes>
          <Route exact path='/' element={<ReactRouter />} />
          <Route exact path='/reactRouter2'  element={<ReactRouter2 />} />
        </Routes>
      </div>
    );
  }
}

export default App;

3. 해결 방법

 해결방법은 2가지가 있습니다.

 

 3-1) 책에 있는 소스를 그대로 활용하고 싶으시면 (v6 미만의 버전 사용)
 예제 소스를 그대로 다운받아 [npm install] 명령어를 실행하고, package.json에 적힌 5.2.0버전이 설치해 사용합니다.

 이미 v6버전이 설치가 되었다면, 아래 명령어를 순서대로 실행해서

 

[npm uninstall react-router-dom] : v6의 react-router-dom를 삭제하고
[npm install react-router-dom@5.2.0] : v5의 react-router-dom를 다시 설치하시면 됩니다.

 

 3-2) v6버전을 사용하고 싶으시다면

App.js 소스를 아래와 같이 수정하시면 됩니다.

import React, { Component } from 'react';
import { Routes, Route } from "react-router-dom";
import ReactRouter from './R089_reactRouter'
import ReactRouter2 from './R089_reactRouter2'

class App extends Component {
  render () {
    return (
      <div className="App">
        <Routes>
          <Route exact path='/' element={<ReactRouter />} />
          <Route exact path='/reactRouter2'  element={<ReactRouter2 />} />
        </Routes>
      </div>
    );
  }
}

export default App;

감사합니다.