webentwicklung-frage-antwort-db.com.de

Nicht abgerufener TypeError: Eigenschaft 'Push' von undefined (React-Router-Dom) kann nicht gelesen werden

Ich habe ein Dashboard mit rotierenden Folien, von denen jedes eine entsprechende Registerkarte in Bldgs hat. Sowohl Dashboard.js als auch Bldgs.js sind untergeordnet zu meinem App.js.

Wenn ein Benutzer in Dashboard.js auf eine bestimmte Folie A klickt, muss DashboardApp.js angewiesen werden, damit AppBldgs.js anweisen kann, dass der Tab A angezeigt wird, wenn er zu Bldgs wechselt.

Ich glaube, dass ich den korrekten Indexwert von Dashboard bis App und bis Bldgs übergebe. In meiner App.js-Datei wird jedoch ein Fehler ausgegeben, der Folgendes angibt:

Uncaught TypeError: Cannot read property 'Push' of undefined

Mein Code hat einwandfrei funktioniert, bevor ich meine handleClick()-Funktion an meine Dashboard-Komponente übergeben habe.

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;
19
Mike

Um history in der App-Komponente zu verwenden, verwenden Sie es mit withRouter. Sie müssen withRouter nur verwenden, wenn Ihre Komponente den Router props nicht empfängt.

Dies kann in Fällen der Fall sein, in denen Ihre Komponente ein verschachteltes untergeordnetes Element einer Komponente ist, die vom Router gerendert wurde, oder Sie die Router-Requisiten nicht an oder übergeben haben, wenn die Komponente nicht mit dem Router verbunden ist überhaupt und wird als separate Komponente von den Routen gerendert.

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

Dokumentation in withRouter

31
Shubham Khatri

für React-Router V4 ändere die Funktion auf

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

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

und

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

exportiere es später als:

export default withRouter (comp_name);
10
cryptoKTM

Sie versuchen, Push, ohne die Aufgabe einer gültigen Bibliothek zu übergeben. auf App.js 

Also: Auf App.js

Sie verwenden BrowserRouter, der standardmäßig den Verlauf von Seiten verarbeitet. Mit dieser Reakt-Router-Dom-Funktion setzen Sie BrowserRouter dazu voraus. 

Verwenden Sie einen Router anstelle von BrowserRouter, um die Kontrolle über Ihren Verlauf zu erhalten. Verwenden Sie den Verlauf, um das Verhalten zu steuern. 

  1. Verwenden Sie npm history "Faden hinzufügen [email protected]"/"npm i [email protected]"
  2. route von 'Reakt-Router-Dom' importieren; // BrowserRouter nicht verwenden
  3. importiere createBrowserHistory aus 'createBrowserHistory'; 

Denken Sie daran, es zu exportieren !! Export const history = createBrowserHistory ();

4.importieren Sie den Verlauf in Dashboard.js 5.importverlauf nach Bldgs.js

hoffe das hilft !!! @ brunomiyamotto 

Siehe meine App.js-Datei unten. Am Ende habe ich {...this.props} an die von mir erstellte NavBar-Komponente übergeben ... Die NavBar-Komponente ist nicht Teil meiner Switch-Routen.

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

In meiner Navbar. Die Schaltfläche, die ich verwendete, hatte den folgenden Code. Ich musste .bind (this), um den Verlauf zu sehen und in der Lage zu sein, this.props.history.Push("/") zu verwenden.

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