私はreact jsでreact-routerを使用しており、彼らのドキュメントに従っていますが、このエラーに直面しています。
コンパイル中にエラーが表示されます。
TypeError: _this.props.history is undefined
これは私の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')
);
そして、これは私の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;
これは、React Router 4.0.0から変更されたためで、従来は browserHistory
を使用していましたが、現在は react-router-dom
パッケージの BrowserRouter
を使用する必要があります。そのため、以下のようなコードになります。
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')
);
もちろん、最初に react-router-dom
をインストールする必要があります。
また、複数の Route
要素を使用する場合、この回答 で説明したように Switch
を使用しなければならないことに注意してください。