preactjs / preact-router

:earth_americas: URL router for Preact.

Home Page:http://npm.im/preact-router

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Redirecting no longer appears to work on first render

Worble opened this issue · comments

Hi, I just updated to v4.0.1 and was trying to use a redirect component as shown in the docs, but redirecting no longer appears to work on the initial render.
See the JSFiddle here: https://jsfiddle.net/vgo2p4b6/1/ - the first render should redirect to Johns Profile, but nothing is matched instead, and clicking the home button anytime after that redirects as expected.
I've tried using the new useRouter to no success either, the second array item method works the same.
Using the router.routeTo method from the first array item renders the correct component, but does not update the url.

We had the same issue and switching from componentDidMount to useEffect seemes to work but there might be some edge cases where this is not equivalent.

import { FunctionalComponent } from 'preact'
import { useEffect } from 'preact/hooks'
import { route } from 'preact-router'

interface RedirectProperties {
  to: string
}

const Redirect: FunctionalComponent<RedirectProperties> = ({ to }: RedirectProperties) => {
  useEffect(() => {
    route(to, true)
  }, [to])

  return null
}

export default Redirect

The readme should probably be updated to have a working example of how to do redirects.

A workaround is to use setTimeout, and call route() in the callback:

setTimeout(() => route('/', true), 0);

Still having this issue on 4.1.2. @premasagar your workaround still works btw

I'm running into the same problem. It seems this is caused when you call route on the first render because the recently mounted Router component has not yet been added internally to the list of Routers. I think using componentWillMount instead of componentDidMount to add the Router to the list of ROUTERS would fix the problem. See:

preact-router/src/index.js

Lines 187 to 194 in 93f1cda

componentWillMount() {
this._updating = true;
},
componentDidMount() {
initEventListeners();
ROUTERS.push(this);
if (customHistory) {

I'm not sure if this would cause other problems though. Can anyone give any insight to this?

Also having the same issue