webentwicklung-frage-antwort-db.com.de

reakt-Router v4 - browserHistory ist nicht definiert

Ich erstelle meine erste Reakt-App in Elektron (auch meine erste Elektron-App). Ich habe zwei Routen und muss von einem zum anderen navigieren. Dafür verwende ich folgenden Code:

Wurzel 

ReactDOM.render(
  <Router history={browserHistory}>
      <App />
  </Router>,
  document.getElementById('root')
);

App 

class App extends React.Component {
    constructor() {
        super();
    }
    render() {
        return (
            <div className="app-master">
                <Switch>
                    <Route path='/city' component={CityList}/>
                    <Route path='/' component={SplashScreen}/>
                </Switch>
            </div>
        )
    }
}

Seite 

import { browserHistory } from 'react-router';
...
browserHistory.Push('/city');

Diese Zeile gibt einen Fehler aus.

TypeError: Cannot read property 'Push' of undefined

Ich habe im Internet nach einer möglichen Lösung gesucht, kann aber keine finden! Es gibt auch viele ähnliche Fragen zu SO, aber bei mir funktionierte nichts :(

javascriptreactjsreact-routerelectron
14
demonofthemist

Sie müssen es jetzt aus dem Modul history importieren, das 3 verschiedene Methoden zum Erstellen verschiedener Historien bietet.

  • createBrowserHistory ist für die Verwendung in modernen Webbrowsern vorgesehen, die die history-API unterstützen.
  • createMemoryHistory wird als Referenzimplementierung verwendet und kann auch in Nicht-DOM-Umgebungen wie React Native oder Tests verwendet werden
  • createHashHistory für ältere Webbrowser

Sie können den Browserverlauf nicht in einer Elektronenumgebung verwenden, den Hash oder den Speicher verwenden.

import { createHashHistory } from 'history'

const history = createHashHistory()

Sie können dann die history verwenden, die in die Requisiten injiziert wird

this.props.history.Push('/')
24
Balthazar

Nützliche Hinweise oben. Die einfachste Lösung, die ich gefunden habe, ist folgendes hinzuzufügen:

import {createBrowserHistory} from 'history';

zu Ihrer Liste von Importanweisungen fügen Sie dann Folgendes hinzu:

const browserHistory = createBrowserHistory();

Könnte nicht perfekt funktionieren, aber für die grundlegenden Dinge, an denen ich gerade arbeite, scheint der Trick zu sein. Hoffentlich hilft das.

2
Sam Michel

Es funktioniert nicht für Sie, da Sie in Ihrer Komponente noch browserHistory verwenden, die nicht mehr aus dem react-router-Paket verfügbar ist. Sie sollten zur Verwendung von histroy mit dem history package wechseln.

Zur Vereinfachung können Sie eine history.js-Datei mit folgendem Inhalt erstellen

import { createBrowserHistory } from 'history'

export default createBrowserHistory();

Root

import history from '/path/to/history';

ReactDOM.render(
  <Router history={history}>
      <App />
  </Router>,
  document.getElementById('root')
);

Seite

import history from 'path/to/history';
...
history.Push('/city');
1
Shubham Khatri

In React-Router V4 initialisieren Sie Router als konstante Konfiguration und greifen Sie auf den Verlauf über this.props In untergeordneten Komponenten zu.

Importieren Sie Abhängigkeiten

import { Route, Router } from "react-router";
import { createBrowserHistory } from "history";

Definieren Sie Ihre Router-Konfiguration und fügen Sie den Verlauf als Stütze hinzu

const history = createBrowserHistory();
const routes = (
  <Router history={history}>
    <Route path='/city' component={CityList}/>
    <Route path='/' component={SplashScreen}/>
  </Router> )

class App extends Component {
  render() {
    return ( 
    <div className = "app-master> 
      {routes} 
    </div>)
}

Wenn Sie route als Konstante definieren und die Rendermethode verlassen, wird die Routenkonfiguration nur einmal initialisiert.

Seitenkomponente

class Page extend Component {
  render() {
    this.props.history.Push('/');
  }
}

Der Verlauf ist jetzt als Requisite in allen untergeordneten Komponenten verfügbar, die in der Routenkonfiguration definiert sind.

0
Shashank K

import { browserHistory } from 'react-router' funktioniert nicht in React Router 4. Link

Verwenden Sie die Weiterleitungskomponente:

import { Redirect } from 'react-router';
<Redirect Push to="/somewhere/else"/>

Die Renderfunktion sollte den gesamten Inhalt durch die Redirect-Komponente ersetzen.

0
vijayst