React-Router导航时如何清除Material-Table过滤器或强制组件重渲染？

针对你遇到的导航返回后过滤条件残留的问题，核心原因是Material-Table自身维护了过滤状态，且组件卸载时不会自动清除，仅修改组件key无法触及其内部状态重置。下面是几种可行的解决思路：

1. 手动接管过滤状态（推荐） #

放弃依赖组件内部的过滤状态，用React的useState自行管理过滤条件，通过filters和onFilterChange绑定到Material-Table，这样就能完全控制过滤值的重置时机：

import { useState, useEffect } from 'react';
import MaterialTable from 'material-table';
import { useLocation } from 'react-router-dom';

const TablePage = () => {
  const [filters, setFilters] = useState([]);
  const location = useLocation();

  // 每当路由切换到表格页时，清空过滤条件
  useEffect(() => {
    setFilters([]);
  }, [location.pathname]);

  return (
    <MaterialTable
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'Surname', field: 'surname' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
        { title: 'Birth City', field: 'birthCity', type: 'numeric' }
      ]}
      data={[
        { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 }
      ]}
      options={{ filtering: true }}
      // 绑定自定义过滤状态
      filters={filters}
      onFilterChange={(newFilters) => setFilters(newFilters)}
    />
  );
};

export default TablePage;

2. 调用表格实例的重置方法 #

通过useRef获取Material-Table的实例，调用内置的resetFilters方法，在路由进入表格页时触发重置：

import { useEffect, useRef } from 'react';
import MaterialTable from 'material-table';
import { useLocation } from 'react-router-dom';

const TablePage = () => {
  const tableRef = useRef(null);
  const location = useLocation();

  useEffect(() => {
    // 路由进入时重置过滤
    if (tableRef.current) {
      tableRef.current.resetFilters();
    }
  }, [location.pathname]);

  return (
    <MaterialTable
      ref={tableRef}
      columns={[/* 列配置 */]}
      data={/* 数据 */}
      options={{ filtering: true }}
    />
  );
};

为什么修改key无效？ #

Material-Table内部的过滤状态并非完全依赖组件的挂载/卸载，可能存在内部缓存或全局状态管理，仅修改组件key只能触发重渲染，但无法清除其内部维护的过滤数据。上述两种方法直接干预过滤状态的管理，因此更可靠。

内容的提问来源于stack exchange，提问作者Case Silva