• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

react-router-dom 버전 업그레이드에 따른 문제

23.07.21 07:52 작성 조회수 205

0

더이상 switch를 사용할 수 없다고 해서 routes, route로 바꿨더니

history.ts:480 Uncaught Error: [div] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

 

위 오류가 나옵니다.

제 코드는 아래와 같습니다.

return (
    <Router>
     <div>
        <Link to="/">Home</Link>
        <Link to="/blogs">Blogs</Link>
     </div>
     <Routes>
      <Route path='/'><div>Home Page</div></Route>
      <Route path='/blogs' element={
        <div className='container'>
          <div className='mb-3'>
            <label className='form-label'>Title</label>
            <input className='form-control' value={title} onChange={(e) => setTitle(e.target.value)}/>
          </div>
          <div className='mb-3'>
            <label className='form-label'>Body</label>
            <textarea className='form-control' value={body} onChange={(e) => setBody(e.target.value)} rows='20'/>
          </div>
          <button className='btn btn-primary' onClick={onSubmit}>Post</button>
        </div>
      }>
      </Route>
     </Routes>
    </Router>
  )

답변 1

답변을 작성해보세요.

0

react-router-dom 버전 5를 사용해주세요 (npm i react-router-dom@5)

강의 내용에서 버전 5를 사용하고 있습니다.

끝부분에 82강에 버전 6으로 업그레이드 하는 영상 있으니 버전 5로 진행하시다가 버전 6으로 업그레이드 해보시면 좋을거 같습니다