Hookrouter (react) changes url but not the view, only after refreshing the page by yourself

Question

I was trying using hookrouter instead of react-router, but I faced a problem. I've seen some answers to similar questions, but only for react-router. Moreover, I ended up just copy-pasting this code.

const routes = {
  "/user": () => <Users />,
  "/about": () => <About />,
  "/contact": () => <Contact />
};

function App() {
  const routeResult = useRoutes(routes);
  return (
    <div className="App">
      <A href="/user">Users Page</A>
      <A href="/about">About Page</A>
      <A href="/contact">Contacts Page</A>
      {routeResult}
    </div>
  );
}

from here https://blog.logrocket.com/how-react-hooks-can-replace-react-router/ But it doesn't work like that. I always need to refresh the page myself to see the change of the title. What's wrong with me? Upd: tag (instead of ) is working properly

Answer 1

If you used create-react-app, you have to remove the <React.StrictMode> tag in index.js.

So, before:

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

and after:

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