在React JS中，只能在<Router>元件的上下文中使用useNavigate()的未捕獲錯誤

Question

我刪除了一些程式碼以便閱讀更容易

但是所有的東西都正確導入並且正常工作，但是我無法解決這個錯誤我得到了這個錯誤，但是我看到了一個教程，甚至reactRouter網站也有相同的方法，但是它在我的程式碼中不起作用

我想要在鍵盤上按Enter鍵時更改路由

這是app.js檔

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;

這是所有路由發生的文件，當useNavigate更改路由時，它應該打開我想要打開的路由（'/SearchResult'）

const Cards = ({ car​​ddata: cardComponent }) => {
  return (
//這是當useNavigate更改路由為“/SearchResult”時應該打開的文件
          <Route path="/SearchResult" element={<SearchResPage />}></Route>
        </Routes>

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

這是將使用useNavigate更改路由的文件，我想要打開的文件是searchResPage（代碼將在此代碼之後）

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

const SearchBar = ({ car​​ddata}) => {
  const navigate=useNavigate();

  //這是onKeyDown呼叫的函數
function searchResult(e) {
    
    if (e.key === "Enter") {
      if (e.target.value === "") return;
        //用於更改路由
          navigate('/SearchResult')

        //用於過濾從props傳遞的結果並顯示它們
        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;

或有其他方法可以在按下Enter鍵時更改路由而不刷新頁面嗎？我能找到這個選項，但不知道為什麼它不起作用

Answer 1

錯誤表示您正在嘗試在​​Router之外使用useNavigate鉤子。 最常見的是在react-router-dom套件中，例如BrowserRouter，然後您有Routes和Route元件。

應該要這樣（Router可以在App或另一個檔案中，如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;

然後您的元件應該可以正常工作。