Gestion du routage React Détail des étapes d'utilisation de React Router

Cette fois, je vais vous apporter une explication détaillée des étapes d'utilisation de React Router pour la gestion du routage React Quelles sont les précautions pour utiliser la gestion du routage React Router ? Voici les cas réels, prenons. un regard.

Les projets React ont généralement de nombreuses URL qui doivent être gérées. La solution la plus couramment utilisée est React Router. Je l'ai étudiée récemment, principalement en lisant la documentation officielle en anglais et en la résumant pour référence future.

Que fait React Router ? L'introduction officielle est :

Une bibliothèque de routage complète pour React, maintient votre interface utilisateur synchronisée avec l'URL. Elle dispose d'une API simple avec des fonctionnalités puissantes. comme le chargement paresseux de code, la correspondance d'itinéraire dynamique et la gestion des transitions d'emplacement intégrées. Faites de l'URL votre première pensée, pas une réflexion après coup. Synchronisation, fonctionnalités puissantes telles que le chargement paresseux de code, la correspondance d'itinéraire dynamique, le traitement de transition de chemin, etc. peut être réalisé via une simple API.

Voici quelques utilisations de React Router :

Une route de rendu simple

Une chose doit être gardée à l'esprit , Routeur En tant que composant React, il peut être rendu.

HashHistory est utilisé ici - il gère l'historique de routage et la partie de hachage de l'URL.

// ...
import { Router, Route, hashHistory } from 'react-router'
render((
 <Router history={hashHistory}>
  <Route path="/" component={App}/>
 </Router>
), document.getElementById('app'))

Ajoutez plus d'itinéraires et spécifiez leurs composants correspondants

import About from './modules/About'
import Repos from './modules/Repos'
render((
 <Router history={hashHistory}>
  <Route path="/" component={App}/>
  <Route path="/repos" component={Repos}/>
  <Route path="/about" component={About}/>
 </Router>
), document.getElementById('app'))

Deuxième lien

Le composant Lien est utilisé ici, qui peut restituer des liens et utiliser l'attribut to pour pointer vers l'itinéraire correspondant.

// modules/App.js
import React from 'react'
import { Link } from 'react-router'
export default React.createClass({
 render() {
  return (
   <p>
    <h1>React Router Tutorial</h1>
    <ul role="nav">
     <li><Link to="/about">About</Link></li>
     <li><Link to="/repos">Repos</Link></li>
    </ul>
   </p>
  )
 }
})

Trois itinéraires imbriqués

Si nous voulons ajouter une barre de navigation, elle doit exister sur chaque page. S'il n'y a pas de routeur, nous devons encapsuler chaque composant de navigation et référence et le restituer dans chaque composant de page. À mesure que l'application grandit, le code devient redondant. React-router fournit un autre moyen d'imbriquer les composants d'interface utilisateur partagés.

En fait, notre application est une série de boîtes imbriquées, et l'url correspondante peut également illustrer cette relation imbriquée :

On peut donc utiliser le handle

Les composants sont imbriqué

<App>    {/* url /     */}
 <Repos>  {/* url /repos   */}
  <Repo/> {/* url /repos/123 */}
 </Repos>
</App>

dans le composant public App afin que les parties publiques telles que la barre de navigation Nav sur le composant App puissent être partagées :

Ensuite, restituez les enfants dans l'App :

// index.js
// ...
render((
 <Router history={hashHistory}>
  <Route path="/" component={App}>
   {/* 注意这里把两个子组件放在Route里嵌套在了App的Route里/}
   <Route path="/repos" component={Repos}/>
   <Route path="/about" component={About}/>
  </Route>
 </Router>
), document.getElementById('app'))

// modules/App.js
// ...
 render() {
  return (
   <p>
    <h1>React Router Tutorial</h1>
    <ul role="nav">
     <li><Link to="/about">About</Link></li>
     <li><Link to="/repos">Repos</Link></li>
    </ul>
    {/* 注意这里将子组件渲染出来 */}
    {this.props.children}
   </p>
  )
 }
// ...

Quatre liens valides

L'une des différences entre le composant Link et la balise a est que Link peut savoir si le chemin vers lequel il pointe est un un routage valide.

Vous pouvez utiliser activeStyle pour spécifier le style d'un lien efficace, ou vous pouvez utiliser activeClassName pour spécifier la classe de style d'un lien efficace.

<li><Link to="/about" activeStyle={{ color: &#39;red&#39; }}>About</Link></li>
<li><Link to="/repos" activeStyle={{ color: &#39;red&#39; }}>Repos</Link></li>

La plupart du temps, on n'a pas besoin de savoir si le lien est valide, mais cette fonctionnalité est très importante dans la navigation. Par exemple : vous pouvez afficher uniquement les liens de routage légaux dans la barre de navigation.

Vous pouvez spécifier dans NavLink que seuls les liens .actives seront affichés, de sorte que si l'itinéraire n'est pas valide, le lien n'apparaîtra pas dans la barre de navigation.

// modules/NavLink.js
import React from 'react'
import { Link } from 'react-router'
export default React.createClass({
 render() {
  return <Link {...this.props} activeClassName="active"/>
 }
})

// modules/App.js
import NavLink from './NavLink'
// ...
<li><NavLink to="/about">About</NavLink></li>
<li><NavLink to="/repos">Repos</NavLink></li>

Cinq paramètres d'URL

Considérez l'url suivante :

/repos/reactjs/react-router

/ repos/facebook/react

Ils peuvent correspondre à cette forme :

/repos/:userName/:repoName

: suivi de paramètres variables

Le

les paramètres variables

dans l'URL peuvent être obtenus via this.props.params[paramsName] :

Prochaine visite /repos/reactjs/react- router et /repos/ Facebook/React verra un contenu différent.

// modules/Repo.js
import React from 'react'
export default React.createClass({
 render() {
  return (
   <p>
{/* 注意这里通过this.props.params.repoName 获取到url中的repoName参数的值 */}
    <h2>{this.props.params.repoName}</h2>
   </p>
  )
 }
})

// index.js
// ...
// import Repo
import Repo from './modules/Repo'
render((
 <Router history={hashHistory}>
  <Route path="/" component={App}>
   <Route path="/repos" component={Repos}/>
   {/* 注意这里的路径 带了 ：参数 */}
   <Route path="/repos/:userName/:repoName" component={Repo}/>
   <Route path="/about" component={About}/>
  </Route>
 </Router>
), document.getElementById('app'))

6 Route par défaut

IndexRoute est ajouté ici pour spécifier le chemin par défaut/composant correspondant. Notez qu'il n'a pas de valeur d'attribut de chemin.

// index.js
import { Router, Route, hashHistory, IndexRoute } from 'react-router'
// and the Home component
import Home from './modules/Home'
// ...
render((
 <Router history={hashHistory}>
  <Route path="/" component={App}>
   {/* 注意这里* /}
   <IndexRoute component={Home}/>
   <Route path="/repos" component={Repos}>
    <Route path="/repos/:userName/:repoName" component={Repo}/>
   </Route>
   <Route path="/about" component={About}/>
  </Route>
 </Router>
), document.getElementById('app'))

De même, il existe également le composant de lien par défaut IndexLink. ,

7 Utilisation de l'historique du navigateur

L'exemple précédent a toujours utilisé hashHistory car il peut toujours s'exécuter, mais une meilleure façon consiste à utiliser l'historique du navigateur , il ne s'appuie pas sur des ports hachés (#).

首先需要改 index.js:

// ...
// bring in `browserHistory` instead of `hashHistory`
import { Router, Route, browserHistory, IndexRoute } from 'react-router'
render((
{/* 注意这里 */}
 <Router history={browserHistory}>
  {/* ... */}
 </Router>
), document.getElementById('app'))

其次需要 修改webpack的本地服务配置，打开 package.json 添加 –history-api-fallback ：

复制代码 代码如下:

"start": "webpack-dev-server --inline --content-base . --history-api-fallback"

最后需要在 index.html中 将文件的路径改为相对路径：

<!-- index.html -->
<!-- index.css 改为 /index.css -->
<link rel="stylesheet" href="/index.css" rel="external nofollow" >
<!-- bundle.js 改为 /bundle.js -->
<script src="/bundle.js"></script>

这样就去掉了url中的 # 。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

AngularJS模态框模板ngDialog使用案例分享

Node.js使用对话框ngDialog实现步骤详解

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!