react-router-dom 6 version

- <Route> 사용 시 <Switch> 가 아닌 <Routes> 로 감싼다

- component={Home} 이라고 쓰던 방식에서 element={<Home />} 로 컴포넌트를 직접 JSX 태그로 바꿔서 넣는다

- 복수의 라우팅을 막는 exact option 도 없어졌다

- 여러 라우팅을 매치하고 싶은 경우 * 을 사용한다

- /:id 부분은?

// react-router-dom version 5.xx
     <BrowserRouter>
     	<Switch>
           <Route exact path='/' component={Home}></Route>
           <Route path='/member' component={Member}></Route>
           <Route path='/movie/:id' component={MovieDetail}></Route>
        </Switch>
      </BrowserRouter>

// react-router-dom version 6.xx
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/:id" element={<Detail />} />
        <Route path="/*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>

- useHistory 대신 useNavigate, navigate() 를 사용한다. history.push, history.replace 모두 navigate 로 대체한다

	let history = useHistory();
	history.push('/home');
	history.replace('/home');

	let navigate = useNavigate();
	navigate('/home');
	navigate('/home', { replace: true })

- state 를 넘겨줄 때도 navigate 를 사용하여 넘긴다

navigate(to, { state })

 

공식문서 읽어봐야 도움이 될 거 다

https://reactrouter.com/docs/en/v6/upgrading/v5

React Router | Upgrading from v5

읽어보기

https://devalice.tistory.com/112

[React-Router] v6로 적용하기

참고

https://blog.woolta.com/categories/1/posts/211

https://stackoverflow.com/questions/69904915/react-router-dom-6-0-1-child-route-not-working-properly

https://stackoverflow.com/questions/69832748/error-a-route-is-only-ever-to-be-used-as-the-child-of-routes-element

https://velog.io/@soryeongk/ReactRouterDomV6

.