我如何从道具访问我的反应组件中的历史记录？

Question

so i'm trying to get the history object from the props in the component i'm working on and it always prints an error this is the class i'm trying to use history object in it

import React from 'react';

const Admin = (props) => {
return (
    <React.Fragment>
        <h1>Admin</h1>  
        <button 
        onClick={()=>this.props.history.push("/edit/new")}
        type="button" className="btn btn-primary btn-lg m-1">
            Add
        </button>
        <table className="table">
                <thead>
                    <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Price</th>
                    <th></th>
                    <th></th>   
                    </tr>
                </thead>
                <tbody>
                    {props.prod.map(prod1 =>(
                        <tr key ={prod1.id}>
                            <td>{prod1.name}</td>
                            <td>{prod1.price}</td>
                            <td>                                   
                                <i 
                                onClick={()=>this.props.history.push(`/edit/${prod1.id}`)
                                }
                                className="fas fa-edit"></i>
                       
                            </td>
                            <td>
                                <span onClick={()=>props.delete(prod1)}>                        
                                    <i className ="fas fa-trash  m-2" ></i>
                                </span>
                            </td>   
                        </tr> 
                    ))}
               
                    
                </tbody>
            </table>






    </React.Fragment>
);

}

export default Admin;

and the app.jsx i called it in route like this

                            <Route path="/admin" element = {<Admin
                        prod = {this.state.Product}
                        delete={this.deleteEntery}
                        editing = {this.editElement}
                        />}/>

Answer 1

You have not imported useHistory hook and declared history using it.

Add this to import:

import { useHistory } from 'react-router-dom'

Declare history inside your function:

const history = useHistory()

Answer 2

First thing you are not passing 'history' as a prop to Admin component, if you wanted to use history object in your component you would simply need to import it and use it (No need to pass it as prop).

// Import it at the top of your file
import { useHistory } from 'react-router-dom'

// Call this hook inside your functional component, history variable has all the required properties
const history = useHistory()