来自 react-router-dom 的 NavLink 不会重新获取页面数据

Question

大家好，我正在使用 react-router-dom Navlink 从一个页面导航到另一个页面。 在这里，我在路线上有两页

1. /仪表板/学校

2./仪表板/公务员

所以假设我在 /dashboard/school 上，然后我使用 NavLink 将其导航到 /dashboard/civil-services 之类的

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

        </NavLink>

路线发生变化，但没有重新获取数据，刷新页面后，数据正确显示

Route 组件的定义方式如下

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

在该组件中，我首先检查参数值并获取数据ACC。 给它。

Ps - 我在这里没有使用 redux

this.props.match.params.type

Answer 1

你必须使用

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

此if condition检查type是否已更改，将注释更改为加载 function 将重新加载页面内容。