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