javascript - react : Reload logic on route change

Question

我目前使用同一 Controller 有四个路由:

    <Route
        component={App}
        path='/'
    >
        <Route
            component={Search}
            path='/accommodation'
        />
        <Route
            component={Search}
            path='/accommodation/:state'
        />
        <Route
            component={Search}
            path='/accommodation/:state/:region'
        />
        <Route
            component={Search}
            path='/accommodation/:state/:region/:area'
        />
    </Route>

该组件将 mapStateToProps 连接到从 api 加载数据的函数。

// ACTIONS
// ==============================================

function mapStateToProps ({destination, properties}) {
    return {destination, properties};
}





// CONNECT & EXPORT
// ==============================================

export default connect(mapStateToProps)(
    connectDataFetchers(Search, [loadSearch])
);

并呈现结果列表。

当使用同一 Controller 将路由更改为任何其他路由时，不会通过对 api 的相关调用来重新加载数据以获取新的结果集。

这可以通过任何 componentWill 函数的 React-router 来实现吗？

解决方案

感谢@john-ruddell，以下解决方案有效:

componentWillReceiveProps = (nextProps) => {
  if (this.props.params != nextProps.params) {
    loadSearch(nextProps.params);
  }
}

Answer 1

您需要添加逻辑来请求数据，并且您的商店需要捕获该数据并将其传递给组件

componentWillReceiveProps(nextProps){
    //boolean to check if the props.params have changed
        //fetch data request
}

您的商店需要使用返回的新数据进行更新。该数据应该作为要渲染的 Prop 传递到同一组件。

您还可以更新路线以大大简化

<Route component={App} path='/'>
    <Route path='/accommodation(/:state)(/:region)(/:area)' component={Search} />
</Route>

注意，括号()指定一个可选参数。因此，您可以只使用一个在所有四种状态下工作的路由，而不是同一组件的四个路由:)