Error: useLocation() may be used only in the context of a component.

---

Error code

Error: useLocation() may be used only in the context of a component.

Cause

위 에러는 원래 React에서 useLocation을 Router 컴포넌트에 넣지 않고 사용해서 발생하는 에러다. 하지만 나는 React-Native에서 사용하지도 않았는데 위 에러가 발생했다. 원인이 뭔지 찾아보니 useSearchParams라는 컴포넌트를 불러서 사용하는 것이 문제였다. 이 컴포넌트는 “react-router-native”에서 불러오는 컴포넌트인데 useSearchParams는 React Router에서 제공하는 훅으로, URL의 쿼리 파라미터를 쉽게 다루기 위해 사용된다. 이 훅을 사용하면 URL의 쿼리 문자열을 읽거나 수정할 수 있으며, 나는 아래와 같이 사용했다.

  // state: Query Parameter 상태 //
  const [queryParam] = useSearchParams();
  const snsId = queryParam.get('snsId');
  const joinPath = queryParam.get('joinPath');

SNS로그인 구현 코드에서 에러가 발생했는데 “react-router-native”와 “@react-navigation/native”을 둘 다 사용해서 발생하는 오류라고 한다.

import { useNavigation } from '@react-navigation/native';
import { NativeRouter, useNavigate, useSearchParams } from 'react-router-native';

어쩌다보니 useNavigation과 useNavigate를 둘 다 쓰게 됐는데 충돌이 일어난 듯 하다.

Solution

오류 해결을 위해서 “react-router-native”을 제거하고 “@react-navigation/native”에서 useSearchParams를 대체하는 컴포넌트를 썼다.

Existing Code

import { useNavigation } from '@react-navigation/native';
import { NativeRouter, useNavigate, useSearchParams } from 'react-router-native';

// state: Query Parameter 상태 //  
const [queryParam] = useSearchParams();  
const snsId = queryParam.get('snsId');  
const joinPath = queryParam.get('joinPath');

Modified Code

import { useNavigation,  useRoute } from '@react-navigation/native';

// Query Parameter 타입 정의
interface RouteParams {
  snsId?: string;
  joinPath?: string;
}

// route: 현재 라우트 정보를 가져옴
const route = useRoute();
const { snsId, joinPath } = route.params as RouteParams; // URL 파라미터

---