OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Error: useNavigate() may be used only in the context of a <Router> component

  • Thread starter Thread starter Chetan vashisht
  • Start date Start date
C

Chetan vashisht

Guest
i am getting this error

Code:
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)

i have read may another answers from this website. like someone said put browser router in index.js.i tried it but its not working .it showing the same

Code:
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')
);

this is my main file app.js its a api project.i m using my navigate within a fuction. you can check my submit handle fuction.i put my navigate function inside a if condition.

Code:
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>
   
    
    
    
  )
}

<p>i am getting this error</p>
<pre><code>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)
</code></pre>
<p>i have read may another answers from this website. like someone said put browser router in index.js.i tried it but its not working .it showing the same</p>
<pre><code>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')
);

</code></pre>
<p>this is my main file app.js its a api project.i m using my navigate within a fuction. you can check my submit handle fuction.i put my navigate function inside a if condition.</p>
<pre><code>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>




)
}






</code></pre>
 

Latest posts

M
Replies
0
Views
1
Mohit Pant
M
Top