[React] Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

이슈 1

router element를 컴포넌트로 호출안해서 생긴 이슈입니다.

import React from "react";

import Home from "pages/Home";

import { createBrowserRouter, RouterProvider } from "react-router-dom";

const router = createBrowserRouter([
    {
        path: "/",
        element: Home,
    },
]);

function App() {
    return (
        <RouterProvider
            router={router}
            fallbackElement={<p>Initial Load...</p>}
        />
    );
}

export default App;

 

해결 방안

import React from "react";

import Home from "pages/Home";

import { createBrowserRouter, RouterProvider } from "react-router-dom";

const router = createBrowserRouter([
    {
        path: "/",
        element: <Home />,
    },
]);

function App() {
    return (
        <RouterProvider
            router={router}
            fallbackElement={<p>Initial Load...</p>}
        />
    );
}

export default App;

 

이슈 2

function 호출 선언을 안해서 생긴 이슈입니다.

import React from "react";

const Card = () => {
    return "card";
};

function Test() {
    return <div>{Card}</div>;
}

export default Test;

 

해결 방안

import React from "react";

const Card = () => {
    return "card";
};

function Test() {
    return <div>{Card()}</div>;
}

export default Test;