[React] Route error

router로 컴포넌트 전환을 위해 

yarn add react-router-dom

설치 후, App.js에 route를 사용하였지만 아래와 같은 에러가 떴다.

 

A <Route> is only ever to be used as the child of <Routes> element, never rendered directly.

Please wrap your <Route> in a <Routes>.

버전이 바껴서

<Route/> 함수 사용을 하기전에 <Routes> 태그를 써주어야하는것

즉,

      <Routes>
        <Route path="/" component={Main} />
        <Route path="/api" component={Api} />
      </Routes>

위처럼 되어야한다.

하지만, 위와 같은 코드로 yarn start를 하니 흰 화면밖에 나오지 않았다.

 

component대신, element를 써주어야했던것이다.

      <Routes>
        <Route path="/" element={<Main/>} />
        <Route path="/api" element={<Api/>}/>
      </Routes>

최종 코드는 위와 같이 써주니, route로 화면 전환이 잘 되는 것을 확인할 수 있었다.

 

Route구성 요소를 구성 요소로 래핑할 것!

경로는 자식을 사용하지 않으며, 구성 요소를 element에서 JSX로 렌더링한다.