'withRouter' был импортирован, но все еще получает TypeError: Невозможно прочитать свойство 'push' из неопределенного

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 в соответствии с просьбой. Я должен ввести больше информации, потому что у меня сейчас слишком много кода. Любая другая необходимость помочь оценить мою проблему

Вот мой контроллер в соответствии с просьбой

    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);

Вам также нужно обернуть App с Router:

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

const history = createBrowserHistory();

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

Answer 2

Чтение документов

Вы можете получить доступ к свойствам объекта истории и совпадению ближайшего с помощью компонента высшего порядка withRouter. withRouter будет передавать обновленные сопоставления, местоположение и хронологические реквизиты обернутому компоненту всякий раз, когда он рендерится.

, чтобы реквизиты были доступны в компоненте, в дополнение к импорту функции вы должны вызвать withRouter(Component)

в вашем случае

export default withRouter(ListUsersComponent);