javascript - tutorial - react-router-dom withrouter

TypeError no capturado: no se puede leer la propiedad ''push'' de undefined(React-Router-Dom)

Question

Tengo un Panel de control con diapositivas giratorias, cada una de las cuales tiene una pestaña correspondiente en Edif . Tanto Dashboard.js como Bldgs.js son hijos de mi App.js

Cuando un usuario hace clic en una diapositiva específica A en Dashboard.js , Dashboard necesita decirle a App.js para que la App pueda decirle a Bldgs.js que Bldgs.js pestaña A cuando se enruta a Bldgs .

Creo que estoy Bldgs valor de índice correcto desde el Dashboard hasta la App y hasta Bldgs . Sin embargo, se está App.js un error en mi archivo App.js que dice:

Uncaught TypeError: Cannot read property ''push'' of undefined

Mi código funcionaba bien antes de comenzar a pasar mi función handleClick() a mi componente 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(
  <MuiThemeProvider>
    <Router history={hashHistory}>
      <App />
    </Router>
  </MuiThemeProvider>,
  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 (
      <div>
        <Route exact path="/" render={(props) => <Dashboard {...props} handleClick={_this.handleClick} />} />
        <Route path="/Bldgs" component={Bldgs} curTab={selectedTab} />
      </div>
    );
  }
}

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;

Answer 1

Está intentando presionar sin entregar la tarea a una biblioteca válida. en App.js

Entonces: en App.js

Está utilizando BrowserRouter que maneja el historial de páginas de forma predeterminada, con esta función react-router-dom confía en BrowserRouter para que lo haga por usted.

Use Router en lugar de BrowserRouter para obtener el control de su historial, use el historial para controlar el comportamiento.

1. Use npm history "yarn add [email protected]" / "npm i [email protected]"
2. importar ruta desde ''react-router-dom''; // no uses BrowserRouter
3. importar createBrowserHistory desde ''createBrowserHistory'';

Recuerda exoportarlo !! exportar const history = createBrowserHistory ();

4. Importar historial a Dashboard.js 5. Importar historial a Bldgs.js

espero que esto ayude !!! @brunomiyamotto

Answer 2

Para hacer uso del history en el componente de la aplicación, withRouter con withRouter . withRouter usar withRouter solo cuando su componente no recibe los Router props ,

Esto puede suceder en los casos en que su componente es un elemento anidado de un componente representado por el enrutador o no le ha pasado los accesorios del enrutador o cuando el componente no está vinculado al enrutador y se representa como un componente separado de las rutas

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 (
      <div>
        <Route exact path="/" render={(props) => <Dashboard {...props} handleClick={_this.handleClick} />} />
        <Route path="/Bldgs" component={Bldgs} curTab={selectedTab} />
      </div>
    );
  }
}

export default withRouter(App);

Documentation sobre withRouter

Answer 3

Vea mi archivo App.js a continuación. Terminé pasando {...this.props} al Componente NavBar que había creado. El componente NavBar no forma parte de mis rutas Switch.

import React, { Component } from ''react'';
import { Route, Link, Redirect, Switch, withRouter } from ''react-router-dom''

import Navbar from ''./Navbar.js'';
import Home from ''./Home/HomeCont'';
import Login from ''./Register/Login'';
import Dashboard from ''./Dashboard/DashboardCont'';


import ''./App.css'';

class App extends Component {
  constructor(props){
    super(props);

  }

  render() {
    return (
      <div className="App">
        <header className="App-header">

//SOLUTION!!!
          <Navbar {...this.props}/>


        </header>
        <Switch>
          <React.Fragment>
            <Route exact path="/" render={(props) => <Home {...props}/>}/>

            <Route exact path="/login" render={(props) => <Login {...props}/>}/>


          </React.Fragment>


        </Switch>
      </div>
    );
  }
}

export default withRouter(App);

Dentro de mi barra de navegación. El botón que utilicé tenía el siguiente código. Tuve que .bind (this) para ver el historial y poder usar this.props.history.push("/")

<Button
   color="inherit"
   onClick={this.handleLogout.bind(this)}>Logout</Button>

Answer 4

para React-router V4 cambie la función a

onClick={this.fun.bind(this)}

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

y

import { withRouter } from ''react-router-dom'';

exportarlo más tarde como:

export default withRouter (comp_name);