React：在路由更改时重新加载逻辑

Question

我目前有四个路线使用同一个控制器：

    <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])
);

并呈现结果列表。

当路由更改为使用同一控制器的任何其他路由时，不会通过对 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
}

您的商店需要使用返回的新数据进行更新。此数据应传递给与要渲染的道具相同的组件。

您还可以更新您的路线以简化它

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

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

Answer 2

您可以修改connectDataFetchers来处理这个问题。这是示例 https://github.com/WebbyLab/itsquiz-wall/blob/master/shared/lib/connectDataFetchers.jsx#L26

因此，它跟踪 URL 更改并在更改后运行连接的动作创建器。

React：在路由更改时重新加载逻辑

React: Reload logic on route change

javascript

reactjs

react-router

redux

解决方案