react-table-v7点击Symbol后无法更新表格，点击后页面空白

问题场景 #

使用react-table-v7的useTable钩子编写Items组件，点击Symbol列的链接后页面变为空白，期望加载新表格替换现有表格。

用户代码 #

function Items() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios("http://localhost:8080/all")
      .then((res) => {
        setData(res.data);
      })
      .catch((err) => console.log(err))
  }, []);

  const columns = useMemo(
    () => [
      {
        Header: "Item search",
        columns: [
          {
            Header: "Symbol",
            accessor: "symbol",
            Cell: (props) => (
              <a href={`/history/${props.value}`}>{props.value}</a>
            ),
          },
          {
            Header: "Name",
            accessor: "name"
          },
        ]
      },
    ],
  ) 

  return (
    <div className="Items">
      <Table columns={columns} data={data} />
    </div>
  );
}

问题原因 #

1. 原生<a>标签会触发浏览器整页刷新，而非React单页应用的路由跳转机制。如果/history/${props.value}路由未配置对应页面组件，或服务器未正确处理该路由的静态资源返回，就会出现空白页。
2. 若需求是在当前组件内替换表格数据而非跳转页面，原生<a>的默认跳转行为会直接离开当前组件，导致页面空白。

解决方案 #

方案1：使用React Router实现单页路由跳转（适合跳转到新页面展示历史表格）

前提是项目已配置React Router，步骤如下：

1. 导入Link组件
2. 将原生<a>替换为<Link>

修改后的Symbol列Cell代码：

import { Link } from 'react-router-dom';

// ... 其他代码不变

{
  Header: "Symbol",
  accessor: "symbol",
  Cell: (props) => (
    <Link to={`/history/${props.value}`}>{props.value}</Link>
  ),
}

同时需确保路由配置文件中存在对应规则，示例：

// 路由配置文件
import { Routes, Route } from 'react-router-dom';
import Items from './Items';
import HistoryTable from './HistoryTable'; // 历史表格组件

function AppRoutes() {
  return (
    <Routes>
      <Route path="/" element={<Items />} />
      <Route path="/history/:symbol" element={<HistoryTable />} />
    </Routes>
  );
}

方案2：阻止默认跳转，在当前组件内更新表格数据（适合不跳转路由，直接替换当前表格）

通过preventDefault()阻止<a>的默认跳转行为，手动请求新数据并更新当前表格：

修改后的Symbol列Cell代码：

{
  Header: "Symbol",
  accessor: "symbol",
  Cell: (props) => (
    <a 
      href={`/history/${props.value}`} 
      onClick={(e) => {
        e.preventDefault(); // 阻止整页跳转
        // 请求对应Symbol的历史数据并更新表格
        axios(`http://localhost:8080/history/${props.value}`)
          .then(res => setData(res.data))
          .catch(err => console.error(err));
      }}
    >
      {props.value}
    </a>
  ),
}

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