How would I go about listening to a route change in reach router?

Asked Apr 19 '20 at 12:07

Active Apr 19 '20 at 12:50

Viewed 327 times

I have a component I'm trying to build pagination functionality for

<PageNumber>
   <StyledLink to="/visited/page/1">1</StyledLink>
   <StyledLink to="/visited/page/2">2</StyledLink>
</PageNumber>

so when I click the link it should change the path (which it does)

the problem is my component does not re-render so I can't seem to then display page 2 (even though the route has changed)

how can I listen to the changes in my component? I'm using hooks

I've searched the docs and all the options seem to indicate you should only listen to route changes using LocationProvider and stuff for testing

        <Router>
            <Visited path="visited/page/:id" />
            <AllCountries path="all" />
            <Map path="map" />
            <Redirect from="visited" to="page/1" />
        </Router>

edited Apr 19 '20 at 12:50

asked Apr 19 '20 at 12:07

Red Baron

7,181
10
39
86

1

Could you provide a Demo link (codesandbox, ....)? – MohammadAmin Mohammadi Apr 19 '20 at 12:19
How are you changing the routes – Shubham Khatri Apr 19 '20 at 12:32
please see updated code showing my router component. I display all the routes inside there and then I just import link in other components to link to them @ShubhamKhatri – Red Baron Apr 19 '20 at 12:51
ok I figured what I can do. I can have 2 useEffect functions and listen to props in one of them – Red Baron Apr 19 '20 at 12:58
@RedBaron can you elaborate? I'm trying to detect route changes before navigating away from a form but it's been rough – HellaDev Aug 12 '21 at 14:48

How would I go about listening to a route change in reach router?

0 Answers0