React-router TypeError: _this.props.history tidak terdefinisi

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(


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

Komentar (0)

Apakah Anda menggunakan npm? Saya memiliki masalah yang sama dengan "react-router": "^4.0.0" di package.json saya. Mengubahnya menjadi "react-router": "^3.0.2" menyelesaikan masalah saya.

Komentar (3)

Solusi di bawah ini bekerja untuk saya di ReactDOM.render:







Ini menggunakan beberapa Routing.

Komentar (0)