Maison  >  Article  >  interface Web  >  Comment sauter dans la route React 4.0

Comment sauter dans la route React 4.0

藏色散人
藏色散人original
2023-01-06 09:50:031591parcourir

Méthode de saut d'itinéraire React4.0 : 1. Installez "history" via "npm install history --save" ; 2. Dans le fichier js correspondant à l'endroit à sauter, introduisez createHashHistory et exécutez le code " import { createHashHistory } de 'historique'createHashHistory().push('/share')".

Comment sauter dans la route React 4.0

L'environnement d'exploitation de ce tutoriel : système Windows 10, version React-Router v4.0, ordinateur Dell G3.

Comment rediriger les itinéraires dans React 4.0 ?

React-Router v4.0 hashRouter utilise js pour sauter

React-Router v4.0 a déconseillé l'utilisation de hashRouter et recommande principalement browserRouter Cependant, car l'utilisation de browserRouter nécessite la coopération du serveur et peut causer des désagréments. , il est parfois encore nécessaire d'utiliser hashRouter .

Voici les étapes d'implémentation du saut hashRouter en mode js dans React-Router v4.0.

v4.0 supprime l'historique, donc pour faire fonctionner l'historique, vous devez installer le package de support :

npm install history --save

Dans le fichier js correspondant à l'endroit où vous souhaitez sauter, introduisez createHashHistory et exécutez le code pour accéder à '/share ' par exemple :

import { createHashHistory } from 'history'
createHashHistory().push('/share')

Déjà ok.

Avant d'utiliser la méthode ci-dessus pour sauter, vous devez confirmer que le routeur a été défini. Vous pouvez vous référer au code suivant :

import { HashRouter as Router, Route, Switch } from 'react-router-dom'
...
<Router>
  <App>
    <Switch>
      <Route path=&#39;/index&#39; component={显示的组件1}>
      <Route path=&#39;/share&#39; component={显示的组件2}>
      ...
    </Switch>
  </App>
</Router>

Apprentissage recommandé : "Tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn