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

94

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

Mammad2c
quelle

Antworten:

169

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

Betomoretti
quelle
11
Wenn Sie in Version 4 'React-Router-Dom' verwenden, müssen Sie 'React-Router' nicht importieren. 'React-Router-Dom' ist abgeschlossen.
Mammad2c
4
Wenn ich mehrere <Route ...> -Tags in BrowserRouter habe, wird folgende Fehlermeldung angezeigt: "Nicht erfasster Fehler: Ein <Router> hat möglicherweise nur ein untergeordnetes Element". Wie repariert man?
Olefrank
1
@erp React-Router-Dom hat mehr Optionen als React-Router. Sie könnten das Dokument besuchen. Aber Sie haben nur einen von ihnen verwendet.
Mammad2c
2
@NSCoder nein, der Router befindet sich ebenfalls im 'React-Router-Dom', sodass nicht sowohl 'React-Router-Dom' als auch 'React-Router' eingeschlossen werden müssen. Wenn Sie 'HashRouter' und 'Router' zusammen benötigen, müssen Sie 'React-Router-Dom' einschließen.
Mammad2c
1
@olefrank Sie müssen Ihre mehreren <Route...>Anweisungen in einen <switch>Wrapper einbinden, anstatt sie einzuschließen <div>. Wenn Sie <div>diese Option verwenden, werden die Routen eingeschlossen. Wenn ein Pfad zwei Routen entsprechen kann, werden beide Komponenten gerendert. Alle
Muhammad Hannan
17

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}/>
Charles Merriam
quelle
Version 4. Könnten Sie bitte meinen Code in Version 4 konvertieren?
Mammad2c
wo ist customHistorydefiniert?
SharpCoder
Es tut uns leid. besser jetzt?
Charles Merriam
4

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>
Saurabh Narhe
quelle
3

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')
);
Dimang Chou
quelle
In index.js:oder In index.jsx:?
Raz Galstyan
@RazGalstyan index.js, wenn Sie Webpack verwenden.
Teoman Shipahi
1

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

jack.lin
quelle
0

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

YangFang
quelle
0

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')
)
Pritam Manerao
quelle