NavLink from react-router-dom does not refetches page data

1
votes

Hey guys so i am using react-router-dom Navlink to naviagte from one page to another. Here i am having two pages on the routes as

  1. /dashboard/school

2./dashboard/civil-services

so lets say if i am on /dashboard/school and then i use NavLink to navigate it to /dashboard/civil-services like

         <NavLink
          exact
          className={`${styles.ProfileMenuList} `}
          activeClassName={`${styles.activeLink}`}
          to="/dashboard/civil-services"
        >

        </NavLink>

the route gets change, but the data is not refetched, after i refresh the page then data is shown correctly

the Route component is defined in the following way

 <BrowserRouter style={{ overflow: "auto" }}>
    <Scroll>
    <Switch>
        <Route
         exact
         path="/dashboard/:type"
         component={DashboardComponent}
        />
    </Switch>
    </Scroll
</BrowserRouter>

and in that component i am first checking the params value and fetchin data acc. to it.

P.s - I am not using redux here

this.props.match.params.type

1
reactjsreact-routerreact-router-dom

1 Answers

1
votes

you have to use

componentDidUpdate(prevProps) {
    if (prevProps.match.params.type !== this.props.match.params.type) {
         // Load Funcition....
    }
}

this if condition checks if type was changed, change the comment to a load function that will reload the content of the page.