Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

useRouter hook does not trigger re-render after matching route params #424

Open
oliverfindl opened this issue May 5, 2022 · 1 comment

Comments

@oliverfindl
Copy link

oliverfindl commented May 5, 2022

Hello,

I have issue using useRouter hook and matching route params. Returned context from useRouter hook contains only url key at render time. Later it also contains matches key (that I'm interested in), but at this point it does not trigger re-render of component and I'm stuck only with initial context. Don't know if this is issue on my end, because there is no documentation for this hook. Here is dummy code, that has same logic as my project, but this somehow works while my project does not. Any hints?

// DummyComponent.tsx

import { FunctionalComponent, h } from "preact";
import { useRouter } from "preact-router";

const DummyComponent: FunctionalComponent = () => {
	const [ context ] = useRouter();
	// console.log(JSON.stringify(context), context); // JSON.stringify fails in this dummy component, but works in my project, see screenshot below
	return (
		<div>{context?.matches?.permalinkId ? "OK" : "MISSING"}</div>
	);
};

export default DummyComponent;
// App.tsx

import { FunctionalComponent, h } from "preact";
import { Route, Router } from "preact-router";
import DummyComponent from "./DummyComponent";

const App: FunctionalComponent = () => {
    return (
        <div id="preact_root">
            <Router>
                <Route path="/permalink/:permalinkId+" component={DummyComponent} />
            </Router>
        </div>
    );
};

export default App;

console.log from my project:
preact-router-context

Thanks.

@oliverfindl
Copy link
Author

Workaround:

const routerContext = useRouter()[0];
const setIncrement = useState<number>(0)[1];
useEffect(() => setIncrement(value => value + 1), [routerContext]);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant