[React] Route v6를 사용하며 리덕스에서 history사용하기

 

나만의 라우터를 만들어서

const CustomRouter = ({history, ...props}) => {
	const [state, setState] = useState({
		action: history.action,
		location: history.location
	});

	useLayoutEffect(() => history.listen(setState), [history]);

	return (
		<Router
			{...props}
      location={state.location}
			navigationType={state.action}
			navigator={history}
		/>
	);
};

 

    <div className="App">
      <CustomRouter history={history}>

이런식으로 넣어서 사용해준다.

store에 이런식으로 넣어주고

	reducer: {
		router: connectRouter(history),

따로 히스토리를 컴포넌트를 만들어주고 

import { createBrowserHistory } from 'history'
import React, {useLayoutEffect, useState} from "react";
import {Router} from "react-router-dom";

export const history = createBrowserHistory();

          history.push({pathname: '/home'});

이런식으로 불러서 사용해준다.

 

 

이렇게 하면 history도 4.10.0버전을 쓰던게

5버전으로 업그레이드해서 써도 문제없이 잘 돌아가게 된다.