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 :
Voici quelques utilisations de React Router : Une route de rendu simpleUne 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.
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'))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'))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>
)
}
})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>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>
)
}
// ...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: 'red' }}>About</Link></li>
<li><Link to="/repos" activeStyle={{ color: 'red' }}>Repos</Link></li>// 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>
Considérez l'url suivante :
/repos/reactjs/react-router/ repos/facebook/react
Ils peuvent correspondre à cette forme :
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'))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'))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中文网其它相关文章！
推荐阅读：
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!
Que signifie le routage Java ?
Que s'est-il passé lorsque la 4G est devenue 2G ?
que signifie l'URL
Comment ouvrir des fichiers php sur un téléphone mobile
effondrement des frontières
La solution au paramètre d'interface chinoise de vscode ne prend pas effet
Quelle est la différence entre golang et python
Fonction d'assistant de pilote Windows
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
