Реагирует на ошибку выброса маршрутизации: невозможно прочитать свойство «push» из неопределенного для маршрутизатора браузера

Question

У меня есть код, где мне нужно показать домашнюю страницу после нажатия кнопки. Когда я называю тот же маршрут «/ Sub» на другой странице, он работает. Но здесь он выдает Cannot read свойство 'push' из неопределенного

Routes.js:

import React from 'react';
import { Switch, BrowserRouter, Route } from 'react-router-dom';

const Routes = () => (
    <BrowserRouter>
        <Switch>
            <Route exact path='/' component={Addpage} />
            <Route path='/New' component={Details} />
            <Route path='/Sub' component={Displaydata} />
        </Switch>
    </BrowserRouter>
) 
export default Routes;

Вот код пользовательского интерфейса:

class Displaypage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Pageid: 1
        }
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleAddNew = this.handleAddNew.bind(this);
    }

    handleSubmit = s => {
        s.preventDefault();
        const Pageid = this.state.Pageid;
        this.props.history.push({
            pathname: "/Sub",
            state: {
                Pageid: this.state.Pageid;
            }
        });
    }

    render() {
        const submitbutton = <button onClick={this.handleSubmit}>Submit</button>
        return (
            <div >
                {submitbutton}
            </div>
        );
    }
}
export default Displaypage;

Answer 1

Я не уверен, что это опечатка, но имя компонента Displaypage, тогда как маршрутизируемый компонент имеет значение Displaydata?

Кроме этого, я не вижу ничего плохого и долженработать как есть. Как показывают другие ответы, withRouter не требуется для прямого компонента в Router.

** Маршрутные реквизиты Все три метода рендеринга будут проходить одинаковые три маршрутных реквизита

история совпадений **

Answer 2

Вы определили свой компонент с https://reacttraining.com/react-router/web/api/withRouter?

import { withRouter } from "react-router"

class Displaypage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Pageid:1
}            
        this.handleSubmit=this.handleSubmit.bind(this);
        this.handleAddNew = this.handleAddNew.bind(this);
    }

handleSubmit = s => {
        s.preventDefault();
        const Pageid = this.state.Pageid;
        this.props.history.push({
            pathname: "/Sub",
            state: {
                Pageid: this.state.Pageid;
            }
        });
    }
     render() {

const submitbutton = <button onClick={this.handleSubmit}>Submit</button>

return (
            <div >                              
                {submitbutton}              

            </div>
        );

}
}   

const DisplaypageWithRouter = withRouter(Displaypage)

export default DisplaypageWithRouter;