useNavigate() may be used only in the context of a component is the error that I'm getting in the console

Question

I think it's because I'm using the latest version of react and they have changed many components, since. All I want to do is navigate to another page.

I tried wrapping it it

<Routes>
              <button
                className="whatevr"
                onClick={() => {
                  navigate("../FeaturePage");
                }}
              >
                Features
              </button>
            </Routes>

Answer 1

Based on both errors regarding the use of the useNavigate and useRoutes hooks both needing to be used within a routing context, i.e. called with in a <Router> component, it seems that you are not actually doing this.

Render the app, or these specific components within a router.

Example:

const App = () => (
  <>
    <Navbar />
    <Routes>
      <Route path="/" .... />
      ... other routes ...
    </Routes>
  </>
);

Parent component rendering App.

<BrowserRouter>
  </App />
</BrowserRouter>