React中如何通过Material UI表格action的onClick属性实现页面跳转？

你遇到的unexpected use of history报错通常有两个核心原因：

1. 项目使用的是react-router v6版本，该版本已经废弃了useHistory API，替换为useNavigate
2. 当前ManageVideos组件没有被路由根组件（BrowserRouter/HashRouter）包裹，无法获取路由上下文

方案1：项目使用react-router v5版本 #

首先确认你的项目根组件（一般是App.js）已经用路由组件包裹了所有子组件：

import { BrowserRouter as Router } from 'react-router-dom'
function App() {
  return <Router>
    {/* 所有路由相关的组件都要放在Router内部，包括ManageVideos */}
    <ManageVideos />
  </Router>
}

如果已经包裹仍有报错，属于eslint规则提示，不是运行错误，在对应代码行上方加注释忽略规则即可，同时可以通过onClick回调的第二个参数拿到当前点击行的数据，跳转时携带参数供详情页使用：

actions={[
  {
    icon: "add_box",
    color: "info",
    tooltip: "查看视频详情",
    onClick: (event, rowData) => {
      // eslint-disable-next-line
      history.push(`/addQuiz/${rowData.youtubeID}`) // 可以携带当前视频的唯一标识到详情页
    },
  },
]}

方案2：项目使用react-router v6版本（目前主流版本） #

直接替换废弃的useHistory为新版APIuseNavigate即可，修改三处代码：

1. 替换导入语句

// 删除原来的 import { useHistory } from "react-router";
import { useNavigate } from "react-router-dom";

2. 替换路由实例声明

// 删除原来的 const history = useHistory();
const navigate = useNavigate();

3. 修改点击跳转逻辑

actions={[
  {
    icon: "add_box",
    color: "info",
    tooltip: "查看视频详情",
    onClick: (event, rowData) => {
      // 跳转到新页面，可携带参数
      navigate(`/addQuiz/${rowData.youtubeID}`)
      
      // 如果你不需要跳转路由，只想在当前页渲染详情组件，也可以用状态控制
      // setCurrentVideo(rowData)
      // setShowDetail(true)
    },
  },
]}

如果要在当前页渲染详情组件不跳转，新增两个状态控制即可：

const [showDetail, setShowDetail] = useState(false)
const [currentVideo, setCurrentVideo] = useState({})

渲染部分根据状态判断显示内容：

return (
  <div>
    {showDetail ? 
      <VideoDetail video={currentVideo} onClose={() => setShowDetail(false)} /> 
      :
      <MaterialTable
        {/* 原表格其他配置保持不变 */}
      />
    }
  </div>
)

内容的提问来源于stack exchange，提问作者Md. Joynal Alam