web-dev-qa-db-fra.com

react-router v4 - browserHistory n'est pas défini

Je crée ma première application de réaction en électronique (ma première application en électronique également). J'ai deux itinéraires et je dois naviguer de l'un à l'autre. Pour cela j'utilise le code suivant:

Racine 

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

Page 

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

Cette ligne donne une erreur,

TypeError: Cannot read property 'Push' of undefined

J'ai cherché une solution possible sur le Web, mais je n'en trouve pas! Il y a beaucoup de questions similaires sur SO aussi, mais rien de tout cela n'a fonctionné pour moi :(

javascriptreactjsreact-routerelectron
14
demonofthemist

Vous devez l'importer depuis le module history qui fournit maintenant 3 méthodes différentes pour créer des historiques différents.

  • createBrowserHistory est destiné aux navigateurs Web modernes prenant en charge l’API history
  • createMemoryHistory est utilisé en tant qu'implémentation de référence et peut également être utilisé dans des environnements non DOM, tels que React Native ou des tests.
  • createHashHistory pour les navigateurs Web existants

Vous ne pouvez pas utiliser l'historique du navigateur dans un environnement électronique, utilisez le hachage ou la mémoire.

import { createHashHistory } from 'history'

const history = createHashHistory()

Vous pouvez ensuite utiliser la variable history injectée dans les accessoires

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

Pointeurs utiles ci-dessus. La solution la plus simple que j'ai trouvée consiste à ajouter:

import {createBrowserHistory} from 'history';

à votre liste d'instructions d'importation, ajoutez ensuite:

const browserHistory = createBrowserHistory();

Cela ne fonctionnera peut-être pas parfaitement, mais pour les choses de base sur lesquelles je travaille, semble faire l'affaire. J'espère que cela pourra aider.

2
Sam Michel

Son ne fonctionne pas pour votre parce que dans votre composant vous utilisez toujours browserHistory qui n'est plus disponible depuis le package react-router Vous devriez changer pour utiliser histroy à partir du history package

Pour simplifier, vous pouvez créer un fichier history.js avec le contenu suivant

import { createBrowserHistory } from 'history'

export default createBrowserHistory();

Root

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');
1
Shubham Khatri

import { browserHistory } from 'react-router' ne fonctionne pas dans le routeur React 4. Lien

Utilisez le composant de redirection:

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

La fonction de rendu doit remplacer tout le contenu avec le composant Redirect.

0
vijayst