Javascript 更改路线时如何正确重新初始化react组件？

以下是上下文：

我有一个“ListsPage”组件，它显示一个分页的元素列表。在这个组件上，我的状态中有pageNumber和rowsPerPage，还有一个搜索函数，它执行一个fetch请求来检索参数中给定的pageNumber和rowsPerPage的数据。因此，每当我到达ListsPage组件、更改页面或更改每页的元素数时，我需要触发搜索功能。 然后，在我的应用程序中，我有类别，对于每个类别，我都可以关联一个ListsPage组件，因此当我从一个类别中的列表转到另一个类别中的列表时，我也需要触发搜索功能。 以下是一些其他规则：

• 例如，如果我在第2页的某个特定类别列表上，我会 要查看其他类别的列表，我需要在第1页

• 如果我在列表的第2页，那么转到另一页，我就去了 “回来”，我需要在第二页。为此，我在 url设置为history.replace每次触发搜索时，我都会 已保存页码和rowsPerPage参数

因此，我的路由是这样设计的：/：categoryId/lists？pageNumber=0&rowsPerPage=10

问题是，当我更改类别时，我希望重新装入我的ListsPage组件，以便将我的所有状态设置为其原始值

目前我正在使用useEffect和usePrevious钩子来完成它，但这让我编写了大量的条件，下面是我的代码，我只是保留了对上下文理解有用的代码部分：

const ListsPage=（）=>{
const history=useHistory（）；
const location=useLocation（）；
const dispatch=useReduxDispatch（）；
常量{categoryId}:{categoryId？：string}=useParams（）；
const urlPrefix=categoryId？`/${categoryId}`:''；
常量queryParams:ISearchQueryParams |未定义=locationToParams（位置）；
const[isLoading，setIsLoading]=useState（true）；
const[pageNumber，setPageNumber]=useState（查询参数？.pageNumber？？表\u第一页\u页码）；
const[rowsPerPage，setRowsPerPage]=useState（查询参数？.rowsPerPage？？默认每页行数）；
const[lists，setLists]=useState（[]）；
const[listsNumber，setListsNumber]=useState（0）；
const prevCategoryId=usePrevious（categoryId）；
useffect（（）=>{
搜索（页码、行/页）；
//eslint禁用下一行react HOOK/deps
}，[pageNumber，rowsPerPage，canonicalSearchState]）；
useffect（（）=>{
如果（prevCategoryId！==categoryId）{
setPageNumber（queryParams？queryParams.pageNumber:表\u第一页\u页码）；
setRowsPerPage（queryParams？queryParams.rowsPerPage：默认的每页行数）；
}否则{
如果（页码！==表\u第一页\u页码&&！查询参数？.pageNumber）{
设置页码（表格第一页）；
}
if（rowsPerPage！==默认的每页行数&！queryParams？.rowsPerPage）{
setRowsPerPage（默认为每页的行数）；
}
}
//eslint禁用下一行react HOOK/deps
}，[类别]；
常量搜索=（pageNb:number，nbOfRowsPerPage:number）=>{
调度（showLoading（））；
设置加载（真）；
getLists（pageNb，nbRowsPerPage）//检索列表数据并使用结果触发setLists和setListsNumber
历史。替换(
paramsToLocation（位置、页码、行页面）
);
};
const handleRowClick=（list:iflatendMixitlist）=>history.push（`${urlPrefix}/lists/${list.id}'）；
返回(
{列表&&(
)}
);
};