[문제] useNavigate()의 state값이 null인 경우

[문제] useNavigate()의 state값이 null인 경우

'react-router-dom'의 useNavigate() 함수 navigate의 state를 통해 data를 보냈는데 state값이 계속 null이 나옵니다.

stackoverflow: '경로 상태에서 전송된 값은 직렬화 가능해야 합니다.' 라는 의견이 있어 간단하게 navigate 내부에 있는 data의 자리에 간단히 {test: 'test'}를 넣어서 테스트를 해봐도 계속 null만 나오고 있습니다.

도대체 왜 이런 걸까유? 

[version]

'react-router-dom': "^6.3.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",

[state send component]

export  function A() {
    const router = useRouter();
    const onClickNext = async () => {
        const regions = {
        Regions: {
                    name: '서울', 
                    children: [{name: '강남', children: [...]}]
                 }, ...
        }
        router.push('/state-use-component', null, regions);
    };
return (
<>
    <Button  onClick={onClickNext}  disabled={false}>
        다음
    </Button>
</>);
}

[router]

import { useNavigate } from  'react-router-dom';
import { useMemo } from  'react';
import { stringify, parse } from  'qs';

export function useRouter() {
    const navigate = useNavigate();
    return useMemo(() => {
        return {
            push(path, search, data) {
                navigate({
                    pathname: path,    
                    search: search ? stringify(search, {indices: false}) : undefined,
                    state: { data },
                });
            },
        };
    }, [navigate]);
}

[state use component]

const location = useLocation();
console.log(location);

 

결론은 공식문서를 잘 보지 않아서 생긴 문제였습니다.

SW는 항상 빠르게 발전하고 변화한다는 것을 인지하고 사용법 또한 바뀌었을 가능성이 큽니다. 이 부분을 놓쳐서 기존의 방법을 고집으로 시간을 할애했습니다.

기존의 navigate 사용을 위의 코드와 같이 진행하였으나 공식문서를 보면 다음과 같습니다.

declare function useNavigate(): NavigateFunction;

interface NavigateFunction {
  (
    to: To,
    options?: {
      replace?: boolean;
      state?: any;
      relative?: RelativeRoutingType;
    }
  ): void;
  (delta: number): void;
}

 

그래서 다음과 같이  [router] 만 고쳐서 문제를 해결했습니다.

[router]

import { useNavigate } from  'react-router-dom';
import { useMemo } from  'react';
import { stringify, parse } from  'qs';

export function useRouter() {
    const navigate = useNavigate();
    return useMemo(() => {
        return {
            push(path, search, data) {
        		navigate(path, {
          			search: search ? stringify(search, { indices: false }) : undefined,
          			state: { data },
        		});
            },
        };
    }, [navigate]);
}