Uncaught TypeError: невозможно прочитать свойство «push» неопределенного (React-Router-Dom)

У меня есть панель инструментов с вращающимися слайдами, каждая из которых имеет соответствующую вкладку в Bldgs . И Dashboard.js и Bldgs.js являются App.js моего App.js

Когда пользователь нажимает на определенный слайд A в Dashboard.js , Dashboard должен сообщать App.js чтобы App могло сообщать Bldgs.js о том, что вкладка A отображается при ее Bldgs на Bldgs .

Я считаю, что я передаю правильное значение индекса из Dashboard до App и до Bldgs . Однако в моем файле App.js появляется ошибка:

Uncaught TypeError: Cannot read property 'push' of undefined

Мой код работал нормально, прежде чем я начал передавать свою handleClick() в свой компонент Dashboard .

index.js

 import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './index.css'; import injectTapEventPlugin from 'react-tap-event-plugin'; import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; import { BrowserRouter as Router } from 'react-router-dom'; import { hashHistory } from 'react-router'; // Needed for onTouchTap // http://stackoverflow.com/a/34015469/988941 injectTapEventPlugin(); ReactDOM.render(     , document.getElementById('root') ); 

App.js

 import React from 'react'; import { Route } from 'react-router-dom'; import Dashboard from './Dashboard'; import Bldgs from './Bldgs'; var selectedTab; class App extends React.Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); selectedTab = 0; } handleClick(value) { selectedTab = value; // console.log(selectedTab); this.props.history.push('/Bldgs'); // console.log(this.props); } render() { var _this = this; return ( 
} />
); } } export default App;

Dashboard.js

 import React, { Component } from 'react'; import './Dashboard.css'; import { AutoRotatingCarousel, Slide } from 'material-auto-rotating-carousel'; ... var curIndex; class Dashboard extends Component { constructor(props) { super(props); this.handleEnter = this.handleEnter.bind(this); this.handleChange = this.handleChange.bind(this); curIndex = 0; } handleEnter(e) { // console.log(curIndex); this.props.handleClick(curIndex); } handleChange(value) { // console.log(value); curIndex = value; } ... } export default Dashboard; 

Bldgs.js

 ... var curTab; class Bldgs extends Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.goHome = this.goHome.bind(this); curTab = 0; } handleChange(value) { this.setState({'selectedTab': value}); console.log(this.state); } goHome(e) { this.props.history.push('/'); } ... } export default Bldgs; 

Чтобы использовать history в компоненте App используйте ее с помощью withRouter . Вам нужно использовать withRouter только тогда, когда ваш компонент не получает Router props ,

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

 import React from 'react'; import { Route , withRouter} from 'react-router-dom'; import Dashboard from './Dashboard'; import Bldgs from './Bldgs'; var selectedTab; class App extends React.Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); selectedTab = 0; } handleClick(value) { selectedTab = value; // console.log(selectedTab); this.props.history.push('/Bldgs'); // console.log(this.props); } render() { var _this = this; return ( 
} />
); } } export default withRouter(App);

Документация по withRouter

для React-router V4 измените функцию на

OnClick = {this.fun.bind (это)}

 fun(){ this.props.history.push("/Home"); } 

а также

 import {browserHistory,withRouter} from "react-router-dom" export default withRouter (comp_name); 

Вы пытаетесь протолкнуть задание на действительную библиотеку. на App.js

Итак: на App.js

Вы используете BrowserRouter, который по умолчанию обрабатывает историю страниц, с помощью этой функции response-router-dom, на которую вы полагаетесь на BrowserRouter, чтобы сделать это перед вами.

Используйте Router вместо BrowserRouter, чтобы получить контроль над своей историей, используйте историю, чтобы контролировать поведение.

  1. Использовать историю npm “пряжа добавить [email protected]” / “npm i [email protected]
  2. import Route from ‘react-router-dom’; // не использовать BrowserRouter
  3. import createBrowserHistory из ‘createBrowserHistory’;

Не забудьте открыть его! export const history = createBrowserHistory ();

История 4.import для Dashboard.js 5.Импорт истории для Bldgs.js

надеюсь это поможет !!! @brunomiyamotto

Давайте будем гением компьютера.