React-Routing-Verwaltung React-Router-Nutzungsschritte im Detail-js-Tutorial-php.cn

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?

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

Nach dem Login kopieren

HashHistory wird hier verwendet – es verwaltet den Routing-Verlauf und den Hash-Teil der URL.

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Link wird hier verwendet Komponente, die kann Rendern Sie Links und verwenden Sie das to-Attribut, um auf die entsprechende Route zu verweisen.

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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>
  )
 }
// ...

Nach dem Login kopieren

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: &#39;red&#39; }}>About</Link></li>
<li><Link to="/repos" activeStyle={{ color: &#39;red&#39; }}>Repos</Link></li>

Nach dem Login kopieren

Sie können activeStyle verwenden, um den Stil eines effektiven Links anzugeben, oder Sie können activeClassName verwenden, um die Stilklasse eines effektiven Links anzugeben.

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"/>
 }
})

Nach dem Login kopieren

rrree

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

IndexRoute wird hier hinzugefügt, um den Standardpfad/die entsprechende Komponente anzugeben. Beachten Sie, dass es keinen Pfadattributwert hat. Ebenso gibt es auch die Standard-Linkkomponente IndexLink. ,

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:

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

Nach dem Login kopieren

其次需要修改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>

Nach dem Login kopieren

这样就去掉了url中的 # 。

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