如果查询参数或路由参数改变，是否可以避免重新挂载组件?

Question

我有一些页面过滤器，如sortBy, groupId等，需要在URL中，因为用户可能会从其他页面来到过滤视图。我试着在路由器参数和查询参数中保持它，但问题是，每当这些参数在url中改变时，整个组件都被重新安装。有没有办法避免这种情况，或者有更好的方法来处理列表页面上的过滤器?

// users main container
<Switch>
<Route
path={`${this.props.match.url}/users/:sort_by/:group_id`}
component={UsersListContainer}
/>
</Switch>

usersListContainer

import React, { Component } from 'react';
import { connect } from 'react-redux';

class UsersListConainer extends Component {
componentDidMount() {
this.props.getStats();
this.props.getUsers();
}
.......
........
render() {
const { usersData, userStats } = this.props;
return (
<>
<Stats data={userStats} />
<Table data={usersData} />
</>
);
}
}
const mapStateToProps = (state) => {
const { usersData, userStats } = state.users;
return {
usersData,
userStats
};
};
export default connect(mapStateToProps, null)(UsersListConainer);

提前感谢!

Answer 1

这种行为是意料之中的，因为每当您对用户列表进行不同的排序或分组时，路径都会发生变化。但是，您并不想为此设置唯一的页面。

我将只使用URL查询参数进行排序和分组。这将不需要组件渲染。所以把你的路由改为:

<Route
path={`${this.props.match.url}/users`}
component={UsersListContainer}
/>

这只会在props.match.url发生变化时引起渲染。

---

对于分组和排序，只使用URL API。这些参数不应该出现在你的路由中:

const url = new URL(window.location.href);

要读取和查询正确的数据，您可以在组件挂载时解析这些数据，然后再获取数据:

const url = new URL(window.location.href);
const sortBy = url.searchParams.get('sortBy');
const groupBy = url.searchParams.get('groupBy');

如果要更改排序或分组，只需将新的查询参数写入URL，以便在刷新后保持它们。您可以通过编程方式(例如，在onClick处理程序中)完成此操作:

url.searchParams.set('sortBy', 'foo');
url.searchParams.append('groupBy', 'bar');
window.location.search = url;
// retrigger fetch here