web-dev-qa-db-fra.com

React-router TypeError: _this.props.history n'est pas défini

J'utilise react-router avec react js et i en suivant leur documentation mais face à cette erreur

pendant la compilation, cela montre l'erreur,

TypeError: _this.props.history is undefined

c'est mon fichier index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={App}>

    </Route>
  </Router>
  ,
  document.getElementById('root')
);

et ceci est mon fichier App.js

import React, { Component } from 'react';
import './App.css';

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

        this.state = {
            headerText: "Props from Header.",
            contentText: "Props from content."
        };
    }
    render() {
        return (
          <div className="App">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Home</a></li>
                <li><a href="">Home</a></li>
            </ul>
          </div>
        );
    }
}

export default App;
reactjsreact-router
11
Manzurul Hoque Rumi

En effet, les choses ont changé dans React Router à partir de 4.0.0. Vous devriez maintenant utiliser BrowserRouter à partir du package react-router-dom lorsque vous utilisiez browserHistory. Donc, votre code va ressembler à:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import { BrowserRouter, Route } from 'react-router-dom';

ReactDOM.render(
    <BrowserRouter>
        <Route path="/" component={ App }/>
    </BrowserRouter>, document.getElementById('root')
);

Bien sûr, vous devrez d'abord installer react-router-dom.

Notez également que si vous utilisez plusieurs éléments Route, vous devrez utiliser un Switch comme expliqué dans cette réponse .

14
Guillaume

Utilisez-vous npm? J'ai eu le même problème avec "react-router": "^ 4.0.0" dans mon package.json. Le changer pour "réagir-routeur": "^ 3.0.2" a résolu mon problème. 

6
Andrew Pelykh

La solution ci-dessous fonctionne pour moi dans ReactDOM.render : 

 <BrowserRouter>
  <Switch>
    <Route path="/home" component={Home} />
    <Route path="/user" component={User} />
    <Route path="*" component={page404} />
  </Switch>
 </BrowserRouter>

Il utilise plusieurs routages.

1
Amir Shabani

J'ai rencontré ce problème lorsque j'essayais d'instancier mon propre routeur plutôt que d'utiliser l'un des périphériques intégrés pour traiter problème d'accès à l'historique

history.js

import { createHashHistory as createHistory } from 'history'

export default createHistory()

root.jsx

import { Router, Route } from 'react-router-dom'
import history from './history'

...

  <Router history={history}>
    <Route path="/test" component={Test}/>
  </Router>

Dans mon cas, le problème était que j'avais une version du paquet history verrouillée à v2.1.2, alors que react-router dépendait d'une version v4.x de history dans ses propres dépendances. Les routeurs intégrés ont donc instancié fin avec la nouvelle variable history, mais lorsque j’ai essayé de le faire moi-même, j’ai récupéré la plus ancienne history et récupéré un objet incompatible.

0
Ian Greenleaf Young

Il me semble que this.props.history n’est pas défini, car vous n’avez pas transféré routeProps au composant à rendre. 

Changez vos itinéraires comme suit: 

 <Route path="/home" render={(routeProps) => <Home {...routeProps}/>} />

Vous pouvez également transmettre d'autres accessoires aux composants rendus à l'aide de cette méthode. 

0
Ramiro Farto