Followed the example, <A> link works, but routeResult doesn't get rendered

[Andrea Maschio]

Here's my simple code, following an example:

import React from "react";
import logo from "./logo.svg";
import { useRoutes, A } from "hookrouter";

import Login from "./components/Login";
import Register from "./components/Register";
import Profile from "./components/Profile";
import NotFoundPage from "./components/NotFoundPage";
import Main from "./components/Main";
const routes = {
  "/": () => <Main />,
  "/login": () => <Login />,
  "/register": () => <Register />,
  "/profile": () => <Profile />,
};
function App() {
  const routeResult = useRoutes(routes);

  return (
    <div>
      <A href="/login"> Login page</A>
      <A href="/register"> Registration</A>
      {routeResult || <NotFoundPage />}
    </div>
  );
}

export default App;

When I click the link I can see the path changing on the browser, but nothing changes on the component. The Login and Register component don't get rendered.

If I reload the page on the same address, they do, which makes me think that hookrouter works, but I probably missed something on the <A> tag or elsewhere?

[Kartik Verma]

Same error

[Gleb Davydov]

Same error

[Andrey]

here is a workaround I applied. I use these useRoutes and navigate instead.

import { useRoutes as useRoutesOrig, navigate as navigateOrig} from "hookrouter";
import { createState, useState } from "@hookstate/core";

// workaround for HookRouter.useRoutes not rerendering when route is changed
const stateRefreshTrigger = createState(0);

export interface QueryParams { [key: string]: any; }
export interface RoutesMap { [key: string]: (params: QueryParams) => any; }

export function useRoutes(routes: RoutesMap) {
    useState(stateRefreshTrigger).get() // mark used
    return useRoutesOrig(routes)
}

export function navigate(path: string) {
    navigateOrig(path)
    stateRefreshTrigger.set(p => p + 1)
}

[Andrey]

Do you have your app wrapped in <React.StrictMode> ? I start suspecting hookrouter does not work in strict mode.

[Gleb Davydov]

I've tested hookrouter with <React.StrictMode> and without. Both <A> and navigate() worked only without strict mode.

[Andrey]

Same for me.

[Hakawã]

Change in index.js

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

For

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

Or

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

[Wayne Patterson]

Removing StrictMode was the fix for me.

[Tor-Henning Ueland]

Also confirming that removing StrictMode is a workaround for this issue

[lancepollard]

Same issue, removing strict mode fixed it, thanks all!