Dieses Mal werde ich Ihnen die Schritte zur Verwendung von React Router für die React-Routing-Verwaltung ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Verwendung von React-Routing-Management React Router? sehen.
React-Projekte haben normalerweise viele URLs, die verwaltet werden müssen. Die am häufigsten verwendete Lösung ist React Router. Ich habe sie kürzlich studiert, hauptsächlich indem ich die offizielle englische Dokumentation gelesen und zum späteren Nachschlagen zusammengefasst habe.
Was macht React Router?
Hier sind einige Verwendungsmöglichkeiten von React Router: Eine einfache Rendering-RouteEine vollständige Routing-Bibliothek für React hält Ihre Benutzeroberfläche synchron mit der URL. Sie verfügt über eine einfache API mit leistungsstarken Funktionen B. verzögertes Laden von Code, dynamischer Routenabgleich und integrierte Handhabung von Standortübergängen. Machen Sie die URL zu Ihrem ersten Gedanken, nicht zu einem nachträglichen Gedanken. Synchronisierung, leistungsstarke Funktionen wie verzögertes Laden von Code, dynamischer Routenabgleich, Pfadübergangsverarbeitung usw. kann über eine einfache API realisiert werden.
Eines muss beachtet werden , Router Als React-Komponente kann es gerendert werden.
// ...
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'))// 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>
)
}
})
Wenn wir eine Navigationsleiste hinzufügen möchten, muss diese auf jeder Seite vorhanden sein. Wenn kein Router vorhanden ist, müssen wir jede Navigationskomponente kapseln und in jeder Seitenkomponente referenzieren und rendern. Wenn die Anwendung wächst, wird der Code überflüssig. React-Router bietet eine weitere Möglichkeit, gemeinsam genutzte UI-Komponenten zu verschachteln.
Tatsächlich besteht unsere App aus einer Reihe verschachtelter Felder, und die entsprechende URL kann diese verschachtelte Beziehung auch veranschaulichen:<App> {/* url / */}
<Repos> {/* url /repos */}
<Repo/> {/* url /repos/123 */}
</Repos>
</App>Komponente Nesting in die öffentliche Komponente App ermöglicht die gemeinsame Nutzung der öffentlichen Teile wie der Navigationsleiste Nav auf der App-Komponente:
// 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')) Als nächstes rendern Sie die untergeordneten Elemente in der 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>
)
}
// ...
Vier gültige Links
Einer der Unterschiede zwischen der Link-Komponente und dem a-Tag besteht darin, dass Link erkennen kann, ob der Pfad, auf den er verweist, eine gültige Route ist. <li><Link to="/about" activeStyle={{ color: 'red' }}>About</Link></li>
<li><Link to="/repos" activeStyle={{ color: 'red' }}>Repos</Link></li>
Meistens müssen wir nicht wissen, ob der Link gültig ist, aber diese Funktion ist für die Navigation sehr wichtig. Beispiel: Sie können in der Navigationsleiste nur legale Routing-Links anzeigen.
// modules/NavLink.js
import React from 'react'
import { Link } from 'react-router'
export default React.createClass({
render() {
return <Link {...this.props} activeClassName="active"/>
}
})Sie können in NavLink festlegen, dass nur .aktive Links angezeigt werden, sodass bei ungültiger Route der Link nicht in der Navigationsleiste angezeigt wird.
Fünf URL-Parameter
Betrachten Sie die folgende URL: /repos/reactjs/react-router
/ repos/facebook/react Sie können dieser Form entsprechen:
/repos/:userName/:repoName
: gefolgt von variablen Parametern
The
variable Parameterin der URL können über this.props.params[paramsName] abgerufen werden:
// modules/App.js import NavLink from './NavLink' // ... <li><NavLink to="/about">About</NavLink></li> <li><NavLink to="/repos">Repos</NavLink></li>
// 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>
)
}
})Nächster Besuch /repos/reactjs/react-router und /repos/ facebook/react wird sehen unterschiedlicher Inhalt.
6 Standardroute
// 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'))
7 Verwendung des Browserverlaufs
Im vorherigen Beispiel wurde immer hashHistory verwendet, da es immer ausgeführt werden kann, aber eine bessere Möglichkeit ist die Verwendung des Browsers Historisch gesehen ist es nicht auf gehashte Ports (#) angewiesen. 首先需要改 index.js: 其次需要 修改webpack的本地服务配置，打开 package.json 添加 –history-api-fallback ： 复制代码 代码如下: "start": "webpack-dev-server --inline --content-base . --history-api-fallback" 最后需要在 index.html中 将文件的路径改为相对路径： 这样就去掉了url中的 # 。 相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！ 推荐阅读：// ...
// bring in `browserHistory` instead of `hashHistory`
import { Router, Route, browserHistory, IndexRoute } from 'react-router'
render((
{/* 注意这里 */}
<Router history={browserHistory}>
{/* ... */}
</Router>
), document.getElementById('app'))<!-- index.html -->
<!-- index.css 改为 /index.css -->
<link rel="stylesheet" href="/index.css" rel="external nofollow" >
<!-- bundle.js 改为 /bundle.js -->
<script src="/bundle.js"></script>
Das obige ist der detaillierte Inhalt vonReact-Routing-Verwaltung React-Router-Nutzungsschritte im Detail. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
