Die Requisite "history" ist in "Router" als erforderlich markiert, ihr Wert ist jedoch "undefined". im Router

Ich bin neu bei ReactJs. Das ist mein Code:

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'));

und kompilieren Sie es mit Webpack. Außerdem habe ich meinen Aliasnamen die Hauptkomponente hinzugefügt. Die Konsole gibt folgende Fehler aus: Ich habe auch diese Links gelesen:

React Router fehlgeschlagen Prop 'Verlauf', ist undefiniert

Wie löse ich, dass der Verlauf als erforderlich markiert ist, wenn der Wert nicht definiert ist?

Aktualisieren von React-Router und Ersetzen von hashHistory durch browserHistory

und viele Suchanfragen im Internet, aber ich konnte dieses Problem nicht beheben. React Router ist Version 4

Wenn Sie den React-Router v4 verwenden, müssen Sie auch den React-Router-Dom installieren. Importieren Sie anschließend BrowserRouter aus dem React-Router-Dom und wechseln Sie den Router für BrowserRouter. Es scheint, dass v4 mehrere Dinge ändert. Außerdem ist die Dokumentation zum React-Router veraltet. Dies ist mein Arbeitscode:

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')
);

Quelle

Welche Version von React Router verwenden Sie? Router Version 4 wurde von der Übergabe der browserHistory-Klasse auf die Übergabe einer Instanz von browserHistory geändert. Weitere Informationen finden Sie im Codebeispiel in den neuen Dokumenten .

Dies hat viele Leute gefangen, die automatisch upgraden; Ein Migrationsdokument wird "jeden Tag" veröffentlicht.

Sie möchten dies oben hinzufügen:

import createBrowserHistory from 'history/createBrowserHistory'

const newHistory = createBrowserHistory();

und

<Router history={newHistory}/>

Wenn Sie mehrere Routen haben möchten, können Sie den Schalter wie folgt verwenden:

import {Switch} from 'react-router'; 

dann

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

Ich habe das gleiche Problem in ES6, aber als ich auf die Bibliothek 'react-router-dom' umgestiegen bin, wurde das Problem gelöst. Für alle Fans von ES6 geht es los:

npm install --save react-router-dom

In index.js:

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

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

Version 4 von React Router hat einige Dinge geändert. Sie erstellten separate Router-Elemente der obersten Ebene für die verschiedenen Verlaufstypen. Wenn Sie mit der Version 4 sollten Sie in der Lage sein , zu ersetzen , <Router history={hashHistory}>mit <HashRouter>oder <BrowserRouter>.
Weitere Informationen finden Sie unter https://reacttraining.com/react-router/web/guides

Ich schreibe auch eine Login-Praxis. Und auch die gleiche Frage wie Sie. Nach einem Tag Kampf fand ich, dass nur es schaffen this.props.history.push('/list/')kann, anstatt viele Plugins zu ziehen. Die react-router-domVersion ist übrigens ^4.2.2. Vielen Dank!

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);
        }
    })
}

Das Folgende funktioniert bei mir mit "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')
)