Repeated unknown route does not trigger changes

[paratron]

Repeated unknown route does not trigger changes

[Paratron]

Please don't misuse this issue comment section for general purpose questions about how to use hook router.

There is no way to force an update to a component. What I would advise in your case is applying the following pattern.

[Paratron]

Yeah, hookrouter does internal route caching. If the outcome does not change, the receiving react component will not be updated.

I think in case of a non-match we can make an exception here. 🤔

[Paratron]

@pickypg I updated the routing function so it triggers an update whenever the route result is null. Released in 1.1.4.

Can you tell me if this solves the problem for you?

[pickypg]

Assuming it works as documented, then this should work perfectly. :)

Thanks!

[timraybould]

How about when I'm trying to navigate from /products/1 to /products/2? The URL changes, but how do I get the component to update?

[Paratron]

If your route is /products/:id, your component will be updated since the url parameters changed.

[timraybould]

That's my route, yes. The issue was I forgot to put "id" in the array that's passed as the second argument to useEffect. Thanks. Hookrouter is great so far, btw!

[timraybould]

Another question on this. Is there a way to force an update to the component?

On a particular route, my app has the ability to open a menu (modal window). Whether or not this menu is visible is a simple flag which I store in the state of the parent (layout) component and pass down to the child (the one associated with the route). When I click "X" within the child, the menu goes away, but I also need to be able to dismiss the menu via a click in the main nav, aka in the parent (layout) component.

If I reference the child component directly from the parent, this all works fine. But if instead I reference the child component via a routeResult, then the child will not update even though the state on the parent (the layout component) changes.

[timraybould]

Apologies. I thought it was related enough to not open a new issue and not merely "general purpose." I think when people search the issues log for "does not trigger changes" many of them will have a question similar to mine and thus having it here might save you some support work.

"No way to force an update" is helpful, thank you. Also, I might be able to use the "update when route result is null" outcome of this thread to help solve my particular use case.

[Paratron]

No worries, I just try to keep the comment threads clean. Did you try my pattern, I mentioned above? You do not need to re-evaluate the route directly, you just want to pass new data to your child component, if I got you right.

Also, that pattern does update your child component but not by force but simply because its props changed 👍

[pickypg]

@Paratron Your change did not seem to be enough. Usage example:

const unknownRoute = () => {
  console.log('Routed to unknown: ' + Date.now());

  return Date.now();
}

return useRoutes({
  '/': () => 'root',
  '/sub': () => 'sub',
}) || unknownRoute();

The time only changes on the first reroute given null.

@timraybould It would probably be clearer to open a separate issue.

[pickypg]

@Paratron Just as an FYI, this is still an issue in 1.1.6 (in case it got lost in the unrelated discussion).

[Paratron]

Hey @pickypg I made a compromise. The route will still remain static, but you can use the new hook usePath() to tap into the current URI path name.

Tell me if this helps with your issue!