javascript - 'withRouter' 已被导入但仍然出现 TypeError : Cannot read property 'push' of undefined

Question

这是我添加用户的组件代码。

import React, { Component } from 'react';
import UserDataService from '../service/UserDataService';
import { withRouter} from 'react-router-dom';

class ListUsersComponent extends Component {

    constructor(props) {
        super(props)
        this.state = {
            users: [], 
            message: null
        }
        this.refreshUsers = this.refreshUsers.bind(this)
        this.deleteUserClicked = this.deleteUserClicked.bind(this)
        this.addUserClicked = this.addUserClicked.bind(this)
        this.createUser = this.createUser.bind(this)
    }

    componentDidMount() {
        this.refreshUsers()
    }

    refreshUsers() {
        UserDataService.retrieveAllUsers()
            .then(
                response => {
                    console.log(response)
                    this.setState({ users: response.data })
                }
            )
    }

    deleteUserClicked(id) {
        UserDataService.deleteUser(id)
            .then(
                response => {
                    this.setState({ message: `Delete of ${id} Successful` })
                    this.refreshUsers()
                }
            )
    }

    addUserClicked() {
        this.props.history.push(`/courses/-1`)
    }

    createUser(user) {
        UserDataService.addUser(user)
            .then(
                response => {
                    this.setState({ message: `User ${user.firstName} ${user.lastName} Successfully added`})
                    this.refreshUsers()
                }
            )
    }

    render() {
        return (
            <div className="container">
                <h3> All Users </h3>
                {this.state.message && <div class="alert alert-success">{this.state.message}</div>}
                <div className="container">
                    <table className="table">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>FirstName</th>
                                <th>LastName</th>
                                <th>Email</th>
                                <th></th>
                                <th></th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {
                                this.state.users.map(
                                    user =>
                                        <tr key={user.id} >
                                            <td>{user.id}</td>
                                            <td>{user.firstName}</td>
                                            <td>{user.lastName}</td>
                                            <td>{user.email}</td>
                                            <td>
                                                <img src={user.imagePath}></img>
                                            </td>
                                            <td>
                                                <button className="btn btn-warning" onClick={() => this.deleteUserClicked(user.id)}>Delete</button>
                                            </td>
                                            <td>
                                                <button className="btn btn-success" onClick={() => this.updateUserClicked(user.id)}>Update</button>
                                            </td>
                                        </tr>
                                )
                            }
                        </tbody>
                    </table>
                </div>
                <div className="row">
                    <button className="btn btn-success" onClick={this.addUserClicked}>Add</button>
                </div>
            </div>
        )
    }
}

export default ListUsersComponent

简单的按钮html

 <div className="row">
    <button className="btn btn-success" onClick={this.addUserClicked}>Add</button>
 </div>

但是当我点击添加按钮时，我得到了

TypeError: Cannot read property 'push' of undefined
ListUsersComponent.addUserClicked
http://localhost:3000/static/js/main.chunk.js:188:24
  185 | }
  186 | 
  187 | addUserClicked() {
> 188 |   this.props.history.push("/user/-1");
      |                      ^  189 | }

我在这里错过了什么？我很确定我所有的版本都是最新的。我按要求发布了 ListUsersComponent 的所有代码。我必须输入更多信息，因为我现在的代码太多了。任何其他需要帮助评估我的问题

这是我要求的 Controller

    private UserRepository repo;

    @GetMapping("/users")
    public Iterable<User> getAllUsers() {
        return repo.findAll();
    }

    @GetMapping("/user/{id}")
    public User getUser(@PathVariable Long id) {
        Optional<User> user = repo.findById(id);
        if (user == null) {
            ResponseEntity.notFound().build();
            return null;
        }

        ResponseEntity.noContent().build();
        return user.get();
    }

Answer 1

withRouter 是高阶组件，仅导入它是行不通的。

您实际上需要将您的组件包装在 withRouter 中，以便它可以访问 this.props.history:

export default withRouter(ListUsersComponent);

你还需要用Router包裹App:

import { Router } from "react-router";
import { createBrowserHistory } from "history";

const history = createBrowserHistory();

ReactDOM.render(
  <Router history={history}>
    <App />
  </Router>,
  document.getElementById('root')
)