카테고리 없음

react v6 router history 변경 사항

maggieH 2021. 11. 19. 09:58

*Router 변경

1.Switch > Routes 로 변경

2.components > element 로 변경

3.element(구 component) 내부 컴퍼넌트 {} > {<>}로 변경

예시)

<BrowserRouter>

<Routes>

<Route path="/" element={<LoginPage />} />

<Route path="login" element={<ListPage />} />

<Route path="listadmin" element={<ListAdminPage />} />

<Route path="list" element={<ListPage />} />

</Routes>

</BrowserRouter>

*History 변경

1.history.push > navigate로 변경

2.해당경로에 전달값 전달해야할때 : (ex. navigate('경로'{state:'전달값'})  )

=>전달받을때 : useLocation사용 : ( ex. const location = useLocation())

3.history.back > navigate(-1)로 변경

예시)

if(response.data.userRole === 0){ navigate("/listadmin"); }else navigate("/list");