如何在 React 中使用 Material UI 表格操作的 onClick 道具移动到不同的页面？

Question

在 Material UI 表中，我使用 Action 来查看数据的详细信息， 因此，每当单击此操作按钮时，我都想移动页面或呈现新组件。 请帮助我有效地做到这一点。提前致谢。

[我尝试使用 history.push() 执行此操作，但它给出错误：意外使用历史记录]

import AddIcon from "@material-ui/icons/Add";
import { get, getDatabase, orderByKey, query, ref } from "firebase/database";
import MaterialTable from "material-table";
import { useEffect, useReducer, useState } from "react";
import { Redirect } from "react-router-dom";
import GridLoader from "react-spinners/GridLoader";
import useVideos from "../hooks/useVideos";
import { useHistory } from "react-router";

const initialState = [{}];
const reducer = (state, action) => {
  switch (action.type) {
    case "videos":
      const data = [];
      let cnt = 1;
      action.value.forEach((video, index) => {
        data.push({
          sl: cnt,
          noq: video.noq,
          id: index,
          youtubeID: video.youtubeID,
          title: video.title,
        });
        cnt = cnt + 1;
      });
      return data;
    default:
      return state;
  }
};

export default function ManageVideos() {
  const { addVideo, updateVideo, deleteVideo } = useVideos("");
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const [cnt, setCnt] = useState(0);
  const [videoList, dispatch] = useReducer(reducer, initialState);
  const history = useHistory();

  useEffect(() => {
    async function fetchVideos() {
      const db = getDatabase();
      const videosRef = ref(db, "videos");
      const videoQuery = query(videosRef, orderByKey());
      try {
        setError(false);
        setLoading(true);
        const snapShot = await get(videoQuery);
        setLoading(false);
        if (snapShot.exists()) {
          dispatch({
            type: "videos",
            value: snapShot.val(),
          });
        }
      } catch (err) {
        console.log(err);
        setLoading(false);
        setError(true);
      }
    }
    fetchVideos();
  }, [cnt]);

  const columns = [
    { title: "Serial", field: "sl", editable: "never" },
    {
      title: "Title",
      field: "title",
      validate: (rowData) => rowData.title !== "",
    },
    {
      title: "Number of Qusetion",
      field: "noq",
      editable: "never",
    },
    {
      title: "Youtube Video Id",
      field: "youtubeID",
      validate: (rowData) => rowData.youtubeID !== "",
    },
  ];
  return (
    <div>
        <MaterialTable
          title="Videos Table"
          data={videoList}
          columns={columns}
          options={{
            export: true,
            grouping: true,
            filtering: true,
          }}
          editable={{
            onRowAdd: (newData) =>
              new Promise((resolve, reject) => {
                setTimeout(() => {
                  addVideo(newData);
                  setCnt((prevCnt) => prevCnt + 1);
                  resolve();
                }, 1000);
              }),
          }}
          actions={[
            {
              icon: "add_box",
              color: "info",
              tooltip: "View Video Details",
              onClick: () => {

                history.push("/addQuiz");
               // want to write something to move a new page or render a component.
              

              },
            },
          ]}
        />
    </div>
  );
}

Answer 1

您的功能看起来很完美！对于导航，您需要在路由器文件中添加路由。并指定要在该路由上呈现的组件。

对于来自组件的重定向，你可以这样做。

import { useHistory } from 'react-router-dom'
const history = useHistory();


history.push('/dahsboard'/) // your route url