To fix the ‘useNavigate() may be used only in the context of a component’ error in React, we put the component that uses useNavigate
inside BrowserRouter
.
For instance, w write
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
to put App
in BrowserRouter
.
Then we write
function App() {
const navigate = useNavigate();
return (
<div>
<button onClick={() => navigate(-1)}>go back</button>
<Nav />
<Routes>
<Route exact path="/" element={<Home />} />
<Route exact path="/home" element={<Home />} />
<Route exact path="/upcoming/:user" element={<Upcoming />} />
<Route exact path="/record/:user" element={<Record />} />
<Route path="*" element={<NotFound />} />
</Routes>
</div>
);
}
to call useNavigate
in App
and call navigate
in the onClick
handler.