[해결 방법] Hooks can only be called inside of the body of a function component.

⚛️ 기본 환경: IDE: VS code, Language: React

 

 

발생 Error

React에서 다음 Source Code를 실행할 경우,

import React from "react";
import { Navigate } from "react-router-dom";
 
const TempComp = (props) => {
    const tempHandler = () => {
        Navigate("/TempPage");
    };
    return (
        <div>
            <button onClick={tempHandler}>
                <span>Button</span>
            </button>
        </div>
    );
};
 
export default TempComp;
 

🚨 다음과 같은 오류 발생

Invalid hook call.

Hooks can only be called inside of the body of a function component.

This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

 

 

발생 원인

⭐ Navigate Hook은 컴포넌트의 함수 본문 내(return 안)에서 사용해야하지만, 함수 본문 외(return 밖)에서 실행

 

 

해결 방법

onClick 함수에서 tempHandler를 함수형으로 직접 선언

import React from "react";
import { Navigate } from "react-router-dom";
 
const TempComp = (props) => {
    const TempHandler = () => {
        Navigate("/TempPage");
    };
    return (
        <div>
            <button onClick={() => {TempHandler();}}>
                <span>Button</span>
            </button>
        </div>
    );
};
 
export default TempComp;