解

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：在路由更改时重新加载逻辑

解

2 个答案: