[리액트] react-router-dom v6 redux에서 navigate('/')하며 데이터 넘기기

react-router-dom v6에서는 useHistory();를 이용하여 다른 라우터에 접근하는것이 아닌, useNavigate()를 이용한다.

문제는 redux middleware에서 페이지 넘기기를 시도하려고 할때 useCreateBrowserHistory를 configStore에 선언하고 가져와 이용하는 방법도 있다고 들었으나,나는 잘 안된다.

내가 해결한 방법

dispatch하는 component

//redux로 dispatch하는 component에서 callback 함수를 보내고
dispatch(midware(data, (dataFound)=> navigate('/',{state: dataFound})))

redux middleware

//redux middleware
const midware = (data, callback) => {
  return function () {
	...
    
    
	callback(dataFound);

  };
};

넘어간 component

function Main(props) {
  
  const location = useLocation();
  const dataFound = location.state;

이렇게 데이터를 가져올 수 있다.

그냥 컴포넌트에서 사용하는데 안넘어간다 하면,

function a(){

navigate('/')
return;

}

navigate 이후에 함수 안에 return;을 해보자