Saya menggunakan react-router dengan react js dan saya mengikuti dokumentasi mereka tetapi menghadapi kesalahan ini
saat mengkompilasi itu menunjukkan kesalahan,
TypeError: _this.props.history is undefined
ini adalah file index.js saya
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')
);
dan ini adalah berkas App.js saya
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;
Hal ini karena ada perubahan pada React Router mulai dari 4.0.0. Anda sekarang harus menggunakan BrowserRouter
dari paket react-router-dom
ketika Anda menggunakan browserHistory
. Jadi kode Anda akan terlihat seperti:
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')
);
Tentu saja, Anda harus menginstal react-router-dom
terlebih dahulu.
Perhatikan juga bahwa jika Anda menggunakan lebih dari satu elemen Route
, Anda harus menggunakan Switch
seperti yang dijelaskan dalam jawaban ini.
Solusi di bawah ini bekerja untuk saya di ReactDOM.render:
<BrowserRouter>
<Switch>
<Route path="/home" component={Home} />
<Route path="/user" component={User} />
<Route path="*" component={page404} />
</Switch>
</BrowserRouter>
Ini menggunakan beberapa Routing.