Getting page not found using navigate with query

I am trying to redirect to a new page in reactjs using navigate with params

but I am getting page not found error. The search page exist

import { useNavigate, useSearchParams } from "react-router-dom";
import { useState } from "react";
const Navbar = () => {
    const navigate = useNavigate()
    const [searchBarParams, setSearchBarParams] = useSearchParams();
    const [search, setSearch] = useState("")
    const handleClick = () => {

        navigate("/search?search_item=" + search)
        searchBarParams.set("foo", "value")
        setSearchBarParams(searchBarParams);
    }
    return (
        <div className="navbar">
            <div className="search">
                <input type="text" onChange={(e) => setSearch(e.target.value)} name="search" placeholder="Search..." />
            </div>
            <input type="button" onClick={handleClick} value="Search" />

        </div>
    )
}

export default Navbar

Search page

This is the page I am trying to redirect to with some query I would like to get on this page and use it to make some searches.

import { useQuery } from '@tanstack/react-query';
import React, { useEffect } from 'react'
import { makeRequest } from '../../axios';

    const Search = () => {
    
    
        const { isLoading, error, data } = useQuery(["search"], () =>
            makeRequest.get("/search?search_item=search").then((res) => {
                return res.data;
            })
        );
    
        return (
            <div>{"search"}</div>
        )
    }
    
    export default Search

The issue might be due to the way of setting and passing the parameter to search page.

Modified code:

import { useNavigate } from "react-router-dom";
import { useState } from "react";

const Navbar = () => {
const navigate = useNavigate();
const [search, setSearch] = useState("");

const handleClick = () => {
  navigate(`/search?search_item=${search}`);
};

return (
  <div className="navbar">
   <div className="search">
     <input
       type="text"
       onChange={(e) => setSearch(e.target.value)}
       name="search"
       placeholder="Search..."
     />
    </div>
   <input type="button" onClick={handleClick} value="Search" />
  </div>
 );
};

export default Navbar;

I removed the usage of useSearchParams and setSearchBarParams and instead, I directly pass the search parameter as a query string in the navigate function.

Regarding the search page, you can access the search query parameter in the Search component using the useLocation hook from react-router-dom.

Search page

import { useQuery } from "@tanstack/react-query";
import { useLocation } from "react-router-dom";
import { makeRequest } from "../../axios";

const Search = () => {
 const location = useLocation();
 const searchItem = new URLSearchParams(location.search).get("search_item");

 const { isLoading, error, data } = useQuery(["search"], () =>
   makeRequest.get(`/search?search_item=${searchItem}`).then((res) => {
     return res.data;
   })
 );

 return <div>{isLoading ? "Loading..." : data}</div>;
};

export default Search;

I used useLocation to access the current location and then extracted the search_item query parameter using URLSearchParams. This value is then used in the useQuery hook to fetch the data based on the search item.

Make sure you have set up the necessary routing configuration in your app to handle the /search route properly.