错误：useNavigate()只能在<Router>组件的上下文中使用

Question

我收到此错误

uncaught Error: useNavigate() may be used only in the context of a <Router> component.
    at invariant (bundle.js:36570:20)
    at useNavigate (bundle.js:36914:35)
    at App (bundle.js:40:75)
    at renderWithHooks (bundle.js:23252:22)
    at mountIndeterminateComponent (bundle.js:26014:17)
    at beginWork (bundle.js:27213:20)
    at HTMLUnknownElement.callCallback (bundle.js:12202:18)
    at Object.invokeGuardedCallbackDev (bundle.js:12251:20)
    at invokeGuardedCallback (bundle.js:12311:35)
    at beginWork$1 (bundle.js:32053:11)

我已经阅读了该网站的其他答案。就像有人说的，将浏览器路由器放入index.js。我尝试过，但它不起作用。它显示相同的

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';


ReactDOM.render(
  <BrowserRouter>
    <App />
    </BrowserRouter>,
  document.getElementById('root')
);

这是我的主文件 app.js，它是一个 api 项目。我正在函数中使用我的导航。你可以检查我的提交句柄功能。我将我的导航功能放在 if 条件中。

import {React,useState} from 'react'
import { useEffect } from 'react';
import { BrowserRouter as Routes,Route } from 'react-router-dom';
import { useNavigate } from 'react-router';
import './index.css'
import Beta from './Main/Beta'
import Home from './Main/Home'
export default function App() {

  let navigate=useNavigate();

const submitHandle = (e)=>{ 
e.preventDefault();
setendpoint(keyword);
if(firstChange){
  navigate('/about');
}
}

  const [keyword, setkeyword] = useState('');
  const [endpoint, setendpoint] = useState('');
  const [answer, setanswer] = useState([]);
  const [isAnswerOk, SetIsAnswerOk] = useState(false);
  const [firstChange, setfirstChange] = useState(false);
  
  useEffect(() => {
  const options = {
    method: 'GET',
    headers: {
      'X-RapidAPI-Host': 'google-web-search.p.rapidapi.com',
      'X-RapidAPI-Key': 'f0892566b9mshc3d8dec8b959f05p1e24b6jsn38bfa46eacef'
    }
  };
  if (endpoint && endpoint.length>=1) {
    setfirstChange(true);
  fetch(`https://google-web-search.p.rapidapi.com/?query=+${endpoint}&gl=US&max=10`, options)
    .then(response => response.json())
    .then(data => {
      SetIsAnswerOk(true)
        setanswer(data.results)
      
     })
    .catch(err => console.error(err));
    
  }}, [endpoint])

const search =(e)=>{
setkeyword(e.target.value);
console.log(keyword);

}



  return (
    
   <div>
  
      <Routes>
      <Route path='/' element={<Home endpoint={endpoint}  search={search} keyword={keyword} response={submitHandle} />}/> 
      <Route path='/search' element={<Beta search={search} farma={answer} response={submitHandle} isAnswerOk={isAnswerOk} keyword={keyword}/>}/> 
      </Routes>
       </div>
   
    
    
    
  )
}

Answer 1

我认为您使用了不正确的 useNavigate 库。 useNavigate 是“react-router-dom”的一部分

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

在这个链接

上检查同样的事情

此外，根据新的更新，Switch 被替换为Routes，这也是react-router-dom 的一部分。

因此，您可以按照react-router-dom的github教程上共享的信息使用如下所示的路由器 - link。

const rootElement = document.getElementById("root");
render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="expenses" element={<Expenses />} />
      <Route path="invoices" element={<Invoices />} />
    </Routes>
  </BrowserRouter>,
  rootElement
);

如果这解决了您的问题，请告诉我。

Answer 2

问题

如果您想在

App

组件中使用任何

react-router-dom

挂钩，则使用路由器包裹

App

组件是正确的。

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

现在的问题是

App

组件错误地导入了另一个路由器并将其重命名为

Routes

。

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

解决方案

修复此导入，只需导入

Routes

即可正确包装所有

Route

组件。

react-router-dom

还会重新导出所有

react-router

，因此无需从

react-router

导入。事实上，您甚至不需要

react-router

作为包依赖项，因为您已经包含了

react-router-dom

。

应用程序

import { React, useEffect, useState } from 'react';
import { Routes, Route, useNavigate } from 'react-router-dom'; // <-- fix import
import './index.css';
import Beta from './Main/Beta';
import Home from './Main/Home';

export default function App() {
  const navigate = useNavigate();

  const submitHandle = (e) => { 
    e.preventDefault();
    setEndpoint(keyword);
    if (firstChange) {
      navigate('/about');
    }
  }

  const [keyword, setKeyword] = useState('');
  const [endpoint, setEndpoint] = useState('');
  const [answer, setAnswer] = useState([]);
  const [isAnswerOk, setIsAnswerOk] = useState(false);
  const [firstChange, setFirstChange] = useState(false);
  
  useEffect(() => {
    const options = {
      method: 'GET',
      headers: {
        'X-RapidAPI-Host': 'google-web-search.p.rapidapi.com',
        'X-RapidAPI-Key': 'f0892566b9mshc3d8dec8b959f05p1e24b6jsn38bfa46eacef'
      }
    };
    if (endpoint?.length >= 1) {
      setFirstChange(true);
      fetch(`https://google-web-search.p.rapidapi.com/?query=+${endpoint}&gl=US&max=10`, options)
        .then(response => response.json())
        .then(data => {
          setIsAnswerOk(true);
          setAnswer(data.results);
        })
        .catch(err => console.error(err));
    }
  }, [endpoint]);

  const search = (e) => {
    setKeyword(e.target.value);
  }

  return (
    <div>
      <Routes> // <-- use Routes, not any router, here
        <Route
          path='/'
          element={(
            <Home
              endpoint={endpoint}
              search={search}
              keyword={keyword}
              response={submitHandle}
            />
          )}
        /> 
        <Route
          path='/search'
          element={(
            <Beta
              search={search}
              farma={answer}
              response={submitHandle}
              isAnswerOk={isAnswerOk}
              keyword={keyword}
            />
          )}
        /> 
      </Routes>
    </div>
  );
};