如何处理React History.Push（）导致不希望的组件重新安装？

Question

问题

在组件内部调用history.push()似乎会导致整个React组件卸载和重新安装；导致无意义的远程服务呼叫。

具体地说，我有一个远程服务调用，该调用会在组件输入时触发。 我不希望重新安装组件，也不希望重新运行服务调用（速度很慢）。

无论如何，history.push(location.pathname + '?' + encodeURI(urlSearchParams.toString()));似乎都将导致卸载。我使用不正确吗？是否有更好的方法来跟踪用户的过滤器更改历史记录，而不必担心不必要的服务呼叫？

意图

我正在使用history.push()通过更改查询参数来保持浏览器历史记录的更新。查询参数控制表格数据的过滤，例如？sort = asc＆isCompleted = true ，等等。

当用户更改其过滤设置时，我希望对存储在状态中的现有表数据进行简单过滤，而不是远程重新加载数据并迫使用户坐下来等待。我还希望用户能够与包含适当过滤器的其他用户共享URL。

我尝试过的事情

• 尝试仅使用state完全删除了history.push（）。此方法有效，但是这意味着不可能有可共享的URL，并且将过滤器附加为查询参数。
• 尝试使用useEffect（）和useRef（）进行修改，但由于不断的重新安装而感到沮丧。

组件代码

import React, { useEffect, useState } from 'react';
import { useLocation, useHistory } from 'react-router-dom';

function useQuery() {
  return new URLSearchParams(useLocation().search);
}

export const WidgetTable = () => {
  let urlSearchParams = useQuery();
  let history = useHistory();
  let location = useLocation();

  const [originalTableData, setOriginalTableData] = useState<TableData| undefined>(undefined);
  const [filteredTableData, setFilteredTableData] = useState<TableData| undefined>(undefined);

  // go get the table data from the remote service
  const fetchTableData = async () => {
   <- go remotely fetch table data and then set originalTableData ->
  }

  // triggered when a user sets a filter on the table (updates the data displayed in the table)
  const filterTableData = () => {
   <- filter the existing table data in state and then set the filterdTableData ->
  }

  // also triggered when a user sets a filter on the table (updates the URL in the browser)
  const setFilter = (filterToSet: ReleasePlanFilterType, value: string) => {
    switch (filterToSet) {
      case ReleasePlanFilterType.Target: {
        if (urlSearchParams.get(filterToSet)) {
          urlSearchParams.set(filterToSet, value);
        } else {
          urlSearchParams.append(filterToSet, value);
        }
        break;
      }
      <snip>
    }

   // We've set the filter in the query params, but persisting this to the history causes a reload :(
   history.push(location.pathname + '?' + encodeURI(urlSearchParams.toString())); 
  
  }

  useEffect(() => {
    fetchTableData();
  }, []);

  return (<snip> a fancy table and filtering controls <snip>);

}

Answer 1

据我所知，在阅读了其他几个类似的堆栈溢出问题之后，似乎还没有办法不重新安装（重新渲染）组件。历史变化会自动改变路由器内部处理事物的方式。我发现这些问题中的大多数都使用了类组件，而答案是使用shouldComponentUpdate来查看先前的路径是否等于新的路径。如果它们相等，则它们将返回，实质上是返回，因此不会重新渲染。

shouldComponentUpdate: function(nextProps, nextState) {
  if(this.props.route.path == nextProps.route.path) return false;
  return true;
}

来源：Prevent react-router history.push from reloading current route

所以现在的问题是将其转换为可与钩子一起使用。我需要运行一些测试，但是我相信这应该适用于您的用例。

useEffect(() => {
    fetchTableData();
}, [location.pathname]);

通过添加location.pathname作为依赖项，只有在实际更改路径名时才应调用此效果。

Answer 2

经过数小时的调试，我设法使用以下方法解决了这个问题：

<Route exact path="/">
  <Home />
</Route>

代替：

<Route exact path="/" component={Home} />

这适用于react-router v5。