Prop `history` ditandai sebagai diperlukan dalam` Router`, tetapi nilainya adalah `undefined`. di Router

Saya baru mengenal ReactJs. Ini kode saya:

var React = require('react');
var ReactDOM = require('react-dom');
var {Route, Router, IndexRoute, hashHistory} = require('react-router');
var Main = require('Main');
ReactDOM.render(
  <Router history={hashHistory}>
  <Route path="/" component={Main}></Route>
</Router>, document.getElementById('app'));

dan menyusunnya dengan webpack. Juga saya menambahkan komponen Utama ke alias saya. Konsol menampilkan kesalahan ini: Saya juga membaca tautan ini:

React Router gagal mendukung 'history', tidak ditentukan

Bagaimana cara mengatasi riwayat ditandai diperlukan, ketika nilai tidak ditentukan?

Mengupgrade React-Router dan mengganti hashHistory dengan browserHistory

dan banyak penelusuran di web, tetapi saya tidak dapat memperbaiki masalah ini. React Router adalah versi 4

Jika Anda menggunakan react-router v4, Anda juga perlu menginstal react-router-dom. Setelah itu, impor BrowserRouter dari react-router-dom dan alihkan Router untuk BrowserRouter. Tampaknya v4 mengubah beberapa hal. Juga, dokumentasi react-router sudah usang. Ini adalah kode kerja saya:

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

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

Sumber

Versi React Router mana yang Anda gunakan? Router versi 4 berubah dari meneruskan kelas browserHistory menjadi meneruskan instance browserHistory, lihat contoh kode di dokumen baru .

Ini telah menangkap banyak orang yang secara otomatis meningkatkan; dokumen migrasi akan keluar 'kapan saja'.

Anda ingin menambahkan ini ke atas:

import createBrowserHistory from 'history/createBrowserHistory'

const newHistory = createBrowserHistory();

dan

<Router history={newHistory}/>

Jika Anda ingin memiliki banyak rute Anda dapat menggunakan tombol seperti ini,

import {Switch} from 'react-router'; 

kemudian

<BrowserRouter>
     <Switch>
         <Route exact path="/" component={TodoComponent} />
         <Route path="/about" component={About} />
     </Switch>
</BrowserRouter>

Saya mendapat masalah yang sama di ES6, tetapi ketika saya beralih menggunakan pustaka 'react-router-dom', masalahnya teratasi. Untuk semua penggemar ES6, ini dia:

npm install --save react-router-dom

Di index.js:

import {HashRouter, Route} from 'react-router-dom';
import App from './App';

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

Versi 4 dari React Router mengubah beberapa hal. Mereka membuat elemen router tingkat atas yang terpisah untuk jenis riwayat yang berbeda. Jika Anda menggunakan versi 4, Anda seharusnya dapat mengganti <Router history={hashHistory}>dengan <HashRouter>atau <BrowserRouter>.
Untuk detail lebih lanjut, lihat https://reacttraining.com/react-router/web/guides

Saya juga menulis latihan Login. Dan juga bertemu dengan pertanyaan yang sama sepertimu. Setelah berjuang seharian, saya menemukan bahwa hanya this.props.history.push('/list/')bisa membuatnya daripada menarik banyak plugin. Omong-omong, react-router-domversinya adalah ^4.2.2. Terima kasih!

handleSubmit(e){
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err,values)=>{
        if(!err){
            this.setState({
                visible:false
            });
            this.props.form.resetFields();
            console.log(values.username);
            const path = '/list/';
            this.props.history.push(path);
        }
    })
}

Di bawah ini berfungsi untuk saya dengan "react-router@^3.0.5":

package.json:

"react-dom": "^16.6.0",
"react-router": "^3.0.5"

index.js:

import { render } from 'react-dom'
import { App } from './components/App'
import { NotFound404 } from './components/NotFound404'
import { Router, Route, hashHistory } from 'react-router'

render(
    <Router history={hashHistory}>
        <Route path='/' component={App} />
        <Route path='*' component={NotFound404} />
    </Router>,
    document.getElementById('root')
)