Detaillierte Erläuterung der React-Routing-Verwaltung und Verwendung von React Router

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

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

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

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>

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

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

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

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

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

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

Zweitens müssen Sie die lokale Dienstkonfiguration von Webpack ändern, package.json öffnen und –history-api-fallback:

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中文网其它相关文章！

推荐阅读：

如何使用AngularJS模态框模板ngDialog

使用Vue.js下载方式案例详解

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!