Error: Failed to fetch RSC payload. Falling back to browser navigation

I made a search form that redirects the user to the page that shows the results of his search. When I click the search button, this error occurs Failed to fetch RSC payload. Falling back to browser navigation. TypeError: Failed to fetch at fetchServerResponse (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/client/components/router-reducer/fetch-server-response.js:51:27) at InnerLayoutRouter (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:282:64) at renderWithHooks (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:10697:18) at mountIndeterminateComponent (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:15735:13) at beginWork$1 (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:17310:16) at beginWork (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:25675:14) at performUnitOfWork (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24526:12) at workLoopConcurrent (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24512:5) at renderRootConcurrent (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24468:9) at performConcurrentWorkOnRoot (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:23339:38) at workLoop (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:261:34) at flushWork (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:230:14) at MessagePort.performWorkUntilDeadline (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:534:21) Here is the component code that renders the form.

"use client";

import {useState, useEffect} from "react";
import {useRouter} from "next/navigation";

import SearchSvg from "@/svgs/search";

import styles from "./search.module.scss";

export default function SearchForm() {
    const router = useRouter();
    const [value, setValue] = useState<string>("");
    const [search, setSearch] = useState<string>("");

    function onChange(event: React.ChangeEvent<HTMLInputElement>) {
        setValue(event.target.value);
    }

    function redirectToSearchResults() {
        router.push(`/cauta/${search}`);
    }

    useEffect(() => {
        setSearch(encodeURIComponent(value));
    }, [value]);

    return (
        <form className={styles.searchForm}>
            <input
                type="search"
                value={value}
                onChange={onChange}
                className={styles.searchInput}
                placeholder="Caută..."
            />
            <button
                className={styles.searchButton}
                onClick={redirectToSearchResults}
            >
                <SearchSvg />
            </button>
        </form>
    );
}

I tried to encode the value that is passed, but still not working. What could be the problem?

Issue related to the form submit default behavior try to add event.preventDefault() to redirectToSearchResults function just like this :

function redirectToSearchResults(event: React.MouseEvent<HTMLButtonElement>) {
    event.preventDefault();
    router.push(`/cauta/${search}`);
}