react-router v4 - browserHistory est indéfini

Je suis entrain de créer ma première réagir application dans l'électronique (mon premier électron application trop). J'ai deux itinéraires & besoin de naviguer de l'un à l'autre. Pour cela je suis à l'aide de code suivant:

Racine

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

Application

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

Page

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

Cette ligne d'erreur,

TypeError: Cannot read property 'push' of undefined

J'ai cherché sur le web pour solution possible, mais ne peut pas trouver un! Il y a beaucoup de questions similaires sur aussi, mais rien n'a fonctionné pour moi 🙁

source d'informationauteur demonofthemist

  1. 20

    Vous devez importer à partir de la history module.

    Aussi vous ne pouvez pas utiliser l'historique du navigateur en un électron de l'environnement, de l'utilisation de la valeur de hachage ou de la mémoire.

    import { createHashHistory } from 'history'

const history = createHashHistory()

    Vous pouvez ensuite utiliser la history injecté dans les accessoires

    this.props.history.push('/')
  2. 2

    Utile pointeurs ci-dessus. La solution la plus simple que j'ai trouvé est d'ajouter:

    import {createBrowserHistory} from 'history';

    à votre liste de déclarations d'importation, puis ajouter:

    const browserHistory = createBrowserHistory();

    Peut ne pas fonctionner parfaitement, mais pour les trucs de base que je suis en train de travailler sur l'air de faire l'affaire. Espérons que cela aide.

  3. 1

    Sa ne fonctionne pas pour votre parce que, dans votre composant vous sont encore à l'aide de browserHistory ce qui n'est plus disponible à partir de react-router paquet. Vous devriez changer à l'aide de histroy de la history package

    Pour simplifier, on peut créer un history.js fichier avec le contenu suivant

    import { createBrowserHistory } from 'history'

export default createBrowserHistory();

    Racine

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

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

    Page

    import history from 'path/to/history';
...
history.push('/city');
  4. 0

    import { browserHistory } from 'react-router' ne fonctionne pas à Réagir routeur 4. Lien

    Utiliser la redirection de composant:

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

    La fonction rendu devrait remplacer l'intégralité du contenu avec le composant de Redirection.