Uncaught error with useNavigate() only in the context of a <Router> component in React JS

Question

I removed some code to make it easier to read

But everything is imported correctly and working fine but I can't resolve this errorI got this error but I saw a tutorial and even reactRouter website has the same method but it's not working for me does not work in the code

I want to change the route when the Enter key is pressed on the keyboard

This is the app.js file

function App() {
       
  return (
    <div>
        <div key="navbar" className="navbar">
            <Navbar />
        </div>
        <div key="search-box" className="search-box">
            <SearchBar carddata={cards}/>
        </div>
        <div>
            <Cards key="cards" carddata={cards} />
        </div>
    </div>
  );
}

export default App;

This is the file where all the routing happens, when useNavigate changes the route it should open the route I want to open ('/SearchResult')

const Cards = ({ carddata: cardComponent }) => {
  return (
//This is the file that should be opened when useNavigate changes the route to "/SearchResult"
          <Route path="/SearchResult" element={<SearchResPage />}></Route>
        </Routes>

        <div className="right-section">
          <RightCard cardData={cardComponent} />
        </div>
      </div>
    </Router>
  );
};
export default Cards;

This is the file that will change the route using useNavigate, the file I want to open is searchResPage (the code will be after this code)

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

const SearchBar = ({ carddata}) => {
  const navigate=useNavigate();

  //This is the function called by onKeyDown
function searchResult(e) {
    
    if (e.key === "Enter") {
      if (e.target.value === "") return;
        //Used to change routing
          navigate('/SearchResult')

        //Used to filter the results passed from props and display them
        carddata.filter((result) => {
          if (`${result.heading}`.toLowerCase().match(e.target.value)) {
              console.log(result)
            }
      });
    }
  }

  return (
    <div className="flex">
      <input onKeyDown={searchResult} type="text" ></input>
    </div>
  );
};

export default SearchBar;

Or is there any other way to change the route when the enter key is pressed without refreshing the page? I can find this option but don't know why it doesn't work

Answer 1

The error means you are trying to use the useNavigate hook outside of Router. The most common is in the react-router-dom package, like BrowserRouter, and then you have the Routes and Route components.

should look like this (Router can be in the App or in another file, such as index.js):

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

import ExamplePage from "./components/ExamplePage";
import SearchBar from "./components/SearchBar";

function App () {
  return (
    <div className="App">
      <Router>        {/* <--- 需要的组件，Router */}
        <SearchBar /> {/* <--- 在Router内部使用useNavigate的组件 */}
        <Routes>
          <Route path="/my-page" element={<ExamplePage />} />
        </Routes>
      </Router>
    </div>
  )
};

export default App;

Then your component should work fine.