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

Question

Here in Material UI table I use an Action to watch details of my data, So I want to move a page or render a new component whenever I click on this action button. Please help me to do this efficiently. Thanks in advance.

[ I tried to do this using history.push() but it giving error : unexpected use of history ]

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

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

How can I move to a different Page using onClick props of Material UI table action in React?

action

render

reactjs

material-ui

material-table