web-dev-qa-db-de.com

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 mit webpack. Außerdem habe ich meinen Aliasnamen Hauptkomponente hinzugefügt. . Die Konsole gibt diese Fehler aus:   Ich habe auch diese Links gelesen: 

Reaktirouter fehlgeschlagene Requisite 'Verlauf', ist undefiniert

Wie löse ich die Historie für erforderlich, wenn der Wert nicht definiert ist?

Aktualisieren des React-Routers und Ersetzen der Hash-Historie durch die Browser-Historie

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

reactjsreact-router
75
Mammad2c

Wenn Sie den reakt-router v4 verwenden, müssen Sie auch den reakt-router-dom installieren. Danach importieren Sie BrowserRouter von React-Router-Dom und wechseln Sie Router für BrowserRouter. Es scheint, dass v4 mehrere Dinge ändert. Auch die Dokumentation des reakt-Routers ist 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

138
betomoretti

Welche Version von React Router verwenden Sie? Router Version 4 wurde von der Übergabe der browserHistory-Klasse zur Übergabe einer browserHistory-Instanz geändert. Siehe Codebeispiel in den neuen Dokumenten .

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

Sie möchten dies nach oben hinzufügen:

import createBrowserHistory from 'history/createBrowserHistory'

const newHistory = createBrowserHistory();

und

<Router history={newHistory}/>
16
Charles Merriam

Wenn Sie mehrere Routen haben möchten, können Sie den Schalter so verwenden,

import {Switch} from 'react-router';

dann 

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

Ich habe das gleiche Problem in ES6 bekommen, aber als ich zur Verwendung der 'Reakt-Router-Dom'-Bibliothek gewechselt 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')
);
3
Dimang Chou

Version 4 von React Router hat mehrere Änderungen vorgenommen. Sie stellten separate Routerelemente der obersten Ebene für die verschiedenen Verlaufstypen her. Wenn Sie Version 4 verwenden, sollten Sie <Router history={hashHistory}> durch <HashRouter> oder <BrowserRouter> ersetzen können.
Weitere Informationen finden Sie unter https://reacttraining.com/react-router/web/guides

1
jack.lin

Ich schreibe auch eine Login-Praxis. Und auch die gleiche Frage wie du. Nach einem langen Tag habe ich festgestellt, dass nur this.props.history.Push('/list/') es schaffen kann, anstatt viele Plugins einzubinden. Übrigens ist die react-router-dom-Version ^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);
        }
    })
}

0
YangFang

Folgendes funktioniert für mich mit "[email protected]^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')
)
0
Pritam Manerao