useNavigate
-
[React-router-dom] 페이지 변환 시 파라미터 반환 받기개발/React 2022. 8. 11. 20:32
useNavigate가 반환하는 함수를 통해 다른 URL로 이동할 수 있습니다. 이때 값을 전달할 수 있는데요. const navigate = useNavigate(); ... navigate('/someURL', {state: data}); // state를 키로 가져야 합니다. someURL 페이지에서는 데이터를 useLocation으로 받을 수 있습니다. 공식문서에는 useLocation 훅 설명이 불친절합니다. side effect를 수행할 때 사용하라고 되어 있는 정도입니다. 어쨌든 받아서 출력해봅시다. import { useLocation } from 'react-router-dom'; const Content = () => { const locate = useLocation(); consol..
-
redux-thunk react-router-dom v6개발/React 2022. 7. 11. 13:28
react router dom v6에서는 미들웨어 단에서 따로 처리하지 않아도 되고, Router가 아니라 BrowserRouter로 앱을 감싸주면 됩니다. 그러고 나서 dispatch 할 때 useNavigate로 얻은 클로저를 같이 보내주면 됩니다. applyMiddleware(ReduxThunk) ... ... return ( dispatch(goToHome(navigate))}>Go to home ); ... export const goToHome = (navigate) => (dispatch, getState) => { navigate('/'); };