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< 🎜 ; >

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

Logique d'implémentation d'Angular :

Logique d'implémentation du routeur React :

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>

<App>
 <Repos/>
</App>

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

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

attribut path

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

<Inbox>
 <Message/>
</Inbox>

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

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

<App>
 <Home/>
</App>

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.

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

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.

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 ?

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

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!