Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die React-Routing-Verwaltung und die Verwendung von React Router ausführlich erläutern , lass uns einen Blick darauf werfen.
Was macht React Router?Eine 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. Hier sind einige Verwendungsmöglichkeiten von React Router:
Eine einfache Rendering-Route
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'))
Fügen Sie weitere Routen hinzu und geben Sie deren entsprechende Komponenten an
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'))Zweiter Link
// 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>
)
}
})
Drei verschachtelte Routen
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>Daher können wir das Handle
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'))// 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>
)
}
// ...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>
// modules/NavLink.js
import React from 'react'
import { Link } from 'react-router'
export default React.createClass({
render() {
return <Link {...this.props} activeClassName="active"/>
}
})Betrachten Sie die folgende URL: /repos/reactjs/react-router / repos/facebook/react
Sie können dieser Form entsprechen:
/repos/:userName/:repoName
The
variable Parameter
in 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>
)
}
})// 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'))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. Zuerst müssen Sie index.js ändern:
// 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'))hinzufügen
复制代码 代码如下:
"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>
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der React-Routing-Verwaltung und Verwendung von React Router. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
