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 :(
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 historycreateMemoryHistory
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 existantsVous 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('/')
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.
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');
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.