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

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

Your function looks like perfect! For navigation, you need to add route in router file. And specify component you want to render on that route.

For redirection from component, you can do something like this.

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


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