5

I am attempting to get the most basic example of hookrouter (an alternative routing library to react-router-dom) working and cannot get the page to change. The URL address will change to /about when I click on the /about link but the UI doesn't update. I am using it with a brand new create-react-app project. I tried the same project on StackBlitz and noticed that after installing hookrouter it said there was a package/dependency missing for the 'url' library....which is interesting because the url package isn't a dependency of hookrouter. But the second I installed the url package on StackBlitz.io, the links worked and the UI updated appropriately when the url changed. I tried installing the url library on my local create-react-app project and it did not fix the situation. So I am not sure if there is a missing dependency, but I can see the useRoutes hook actually loading a change when the URL changes but for whatever reason the UI will not update. Here is my code for my App.js file.

import { A, useRoutes } from 'hookrouter';
import React from 'react';
import './App.css';
import { AboutPage } from './pages/AboutPage';
import { HomePage } from './pages/HomePage';

const routes = {
  '/': () => <HomePage />,
  '/about': () => <AboutPage />
}

function App() {
  const routeResult = useRoutes(routes);

  return (
    <div className="App">
      <A href="/">Home</A>
      <A href="/about">About</A>
      <header className="App-header">
        {routeResult}
      </header>
    </div>
  );
}

export default App;
Linda Paiste
  • 38,446
  • 6
  • 64
  • 102
Moustache_Me_A_Question
  • 521
  • 5
  • 17

2 Answers2

14

It seems that hookrouter doesn't work with Strict Mode that comes enabled by default in the latest versions of CRA. (same I guess with StackBlitz and codesandbox)

You'll need to just remove the <React.StrictMode> component from your index.js

<React.StrictMode>
  <App />
</React.StrictMode>

codesandbox emaple

With that said, Unless you have really simple App, I encourage you to use react-router-dom as this package is relatively new and you may have more unusual bugs.

awran5
  • 4,333
  • 2
  • 15
  • 32
  • 1
    THANK YOU! That worked! I didn't notice that had changed in create-react-app. Yea, I really only use react-router-dom but I'm working on a tutorial showing how to use hookrouter and was confused as to why the basic example wouldn't work. Doesn't look like the hookrouter library hasn't been updated in awhile. Thanks again for the help. – Moustache_Me_A_Question Apr 06 '20 at 00:39
  • Thanks for this. I was stuck on it for a few hours to be sure! – TResponse Jun 07 '20 at 09:48
  • Took me a few hours to debug this stupid bug, comparing working example with my app and only after I discovered it by myself I could find this answer with google "hookrouter react strict mode" (( Yet still like hookrouter idea more the react router) Where should be this issue forwarded for correction by react team? – Poul Mar 24 '21 at 17:37
0

not work anymore use this : 'react-router-dom'

Alireza Abdi
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 04 '22 at 16:34