Explication détaillée de la façon d'utiliser React-Router pour implémenter le routage frontal

Cet article présente principalement l'explication détaillée du routage frontal et la posture d'utilisation de React-Router. Il présente également l'utilisation de React-Router en détail. Ceux qui sont intéressés peuvent en savoir plus sur

. routage

Pour ceux qui ont de l'expérience dans le développement de SPA, le terme routage n'est pas étranger. Les techniques de mise en œuvre du routage front-end et du routage back-end sont différentes. , mais les principes sont les mêmes. Avant l'émergence de l'API d'historique HTML5, le routage frontal était implémenté via le hachage, et le hachage était compatible avec les versions inférieures des navigateurs. Il doit avoir # dans ses règles URI. Le service Web n'analyse pas le hachage, ce qui signifie que le contenu après # sera automatiquement ignoré par le service Web. Cependant, JavaScript peut être lu via window.location.hash. Après avoir lu le chemin et l'avoir analysé, il peut répondre. la logique des différents chemins à traiter.

Une brève introduction à AngularJs UI-Router

Si vous avez de l'expérience dans le développement AngularJS, # n'est pas inconnu, angulairejs a son propre officiel implémentation Système de routage, il existe également un mécanisme de routage imbriqué tiers relativement représentatif UI-Router comme indiqué dans le bloc de code suivant :

.state("main.list",angularAMD.route({
    url : '/list/:params',//url &参数
    views : {
      "header@main" : angularAMD.route({
        templateUrl : 'simple/view/main/html/main/Header.html',
        controller:'HeadController',
        controllerUrl:[ ****.js
                  ]
      }),
      "menu@main" : angularAMD.route({
        templateUrl : 'simple/view/main/html/main/MenuModule.html',
        controller : "MenuController",
        controllerUrl:[ ****.js]
      }),
      "mainContent@main":angularAMD.route({
        templateUrl : 'simple/view/main/html/main/MainContent.html'
      })
    }
  }))

La première partie de la fonction state() Le premier paramètre est la route. "main.list" est un mécanisme de routage imbriqué Lorsque la page passe à la route "main.list", les modules et leurs ressources (html, js, etc.), puis chargez les modules et ressources (html, js, etc.) sous l'état ("main.list") pour implémenter l'imbrication de routage

react-router

-Tout d'abord, le morceau de code précédent

<Router history={ hashHistory }>
  <Route path=&#39;/&#39; component={CoreLayout}>
  <IndexRoute component={HomeView}/>
  <Route path=”/HODE_ROUTE/:param“ component={HomeView}/>
  <Route path=“ /AUDIT_ROUTE/:param" component={AuditView}/>
  <Route path=“/CHART_ROUTE” component={ChartView}/>
  </Route>
</Router>

React-router implémente l'imbrication de routeur sous la forme d'une syntaxe jsx similaire à la structure DOM ; AngularJs UI-Router semble être très différent, mais en fait les idées sont similaires

Logique d'implémentation d'Angular :

Jump=》state=》module= ; 》ressource statique (js, css, html) =》show (affichage de la page)

Logique d'implémentation du routeur React :

Jump=》path=》component=》 Ressource statique (js, css, html) =》show (affichage de la page)

Cet article parle principalement de React-Router Ce qui suit est une brève introduction à la posture d'utilisation de React-Router :

react-router est couramment utilisé. Démarrer avec les composants

Routage imbriqué

<Router history={hashHistory}>
 <Route path="/" component={App}>
  <Route path="/repos" component={Repos}/>
  <Route path="/about" component={About}/>
 </Route>
</Router>

Dans le code ci-dessus, l'utilisateur accède à /repos, le composant App sera chargé en premier, puis le composant Repos sera chargé à l'intérieur.

<App>
 <Repos/>
</App>

La sous-route ne peut pas non plus être écrite dans le composant Routeur, et l'attribut routes du composant Routeur peut être transmis séparément

let routes = <Route path="/" component={App}>
 <Route path="/repos" component={Repos}/>
 <Route path="/about" component={About}/>
</Route>;

<Router routes={routes} history={browserHistory}/>

attribut path

L'attribut path du composant Route spécifie les règles de correspondance de l'itinéraire Voir l'exemple ci-dessous<.>

Dans le code ci-dessus, lorsque l'utilisateur accède à /inbox/messages/:id, le composant suivant sera chargé.

<Route path="inbox" component={Inbox}>
  <Route path="messages/:id" component={Message} />
</Route>

<Inbox>
 <Message/>
</Inbox>

Composant IndexRoute

Semblable à index.html, le composant est chargé par défaut. le code charge le composant home par défaut

Maintenant, lorsque l'utilisateur accède à /, la structure du composant chargé est la suivante.

<Router>
 <Route path="/" component={App}>
  <IndexRoute component={Home}/>
  <Route path="accounts" component={Accounts}/>
  <Route path="statements" component={Statements}/>
 </Route>
</Router>

<App>
 <Home/>
</App>

Composant de redirection

Le composant de redirection est utilisé pour le saut d'itinéraire, c'est-à-dire lorsque l'utilisateur accède à un itinéraire, il sautera automatiquement vers un autre itinéraire.

Accédez maintenant à /inbox/messages/5 et il passera automatiquement à /messages/5.

<Route path="inbox" component={Inbox}>
 {/* 从 /inbox/messages/:id 跳转到 /messages/:id */}
 ＜Redirect from="messages/:id" to="/messages/:id" />
</Route>

Lien

Le composant Link est utilisé pour remplacer la balise a et générer un lien, permettant aux utilisateurs de passer à un autre itinéraire après avoir cliqué. Il s'agit essentiellement d'une version React de la balise a qui reçoit le statut du routeur.

Traitement des formulaires

Le composant Link est utilisé pour les sauts de clics normaux de l'utilisateur, mais parfois des opérations telles que les sauts de formulaire et les sauts de clics de boutons sont également requises. Comment connecter ces situations avec React Router ?

La première façon est d'utiliser browserHistory.push

${userName} un backend. La façon la plus utilisée d'écrire des expressions dans le langage est d'obtenir les variables dans la chaîne

 handleSubmit(event) {
  event.preventDefault()
  const userName = event.target.elements[0].value
  const repo = event.target.elements[1].value
  const path = `/repos/${userName}/${repo}`
  browserHistory.push(path)
 }

 handleSubmit(event) {
  // ...
  this.context.router.push(path)
 },

La deuxième méthode consiste à utiliser l'objet contextuel.

export default React.createClass({

 // ask for `router` from context
 contextTypes: {
  router: React.PropTypes.object
 },

 handleSubmit(event) {
  // ...
  this.context.router.push(path)
 },
})

Gestion des fichiers de routeur de développement collaboratif multi-personnes Généralement, un Le projet aura un fichier de routeur unifié, qui équivaut à un pool de routeurs. Différentes requêtes demandent le chemin correspondant dans le pool de routeurs et chargent la page requise pour la requête. mais. . . Chaque développeur développant un composant devra configurer le routage, ce qui rendra le fichier du routeur difficile à gérer et entraînera facilement des conflits, voire des pannes. Donc. . , peut-être que pour un fichier XXX.router dans chaque dossier de composant, une fonction de hook peut être déclenchée lorsque le code frontal est empaqueté et téléchargé en ligne, et le fichier XXX.router peut être unifié dans le fichier du routeur central, évitant ainsi plusieurs -opérations de personne.

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!