Detaillierte Erläuterung der Verwendung von React-Router zur Implementierung des Front-End-Routings

In diesem Artikel werden hauptsächlich die detaillierten Erläuterungen zum Front-End-Routing und zur Verwendung von React-Router vorgestellt. Interessierte können sich auch ausführlicher darüber informieren.

Routing

Für diejenigen, die Erfahrung in der SPA-Entwicklung haben, ist der Begriff Routing nicht unbekannt. Die Implementierungstechniken von Front-End-Routing und Back-End-Routing sind unterschiedlich , aber die Prinzipien sind die gleichen. Vor dem Aufkommen der History-API von HTML5 wurde das Front-End-Routing über Hash implementiert, und Hash war mit Browsern niedrigerer Versionen kompatibel. Es muss # in seinen URI-Regeln enthalten. Der Webdienst analysiert den Hash nicht, was bedeutet, dass der Inhalt nach # vom Webdienst automatisch ignoriert wird. Nach dem Lesen des Pfads und dem Parsen kann JavaScript jedoch darauf reagieren die Logik verschiedener Wege befassen.

Eine kurze Einführung in AngularJs UI-Router

Wenn Sie Erfahrung in der AngularJS-Entwicklung haben, ist # nicht unbekannt, AngularJS hat seinen eigenen Beamten Implementierung Routing-System, es gibt auch einen relativ repräsentativen verschachtelten Routing-Mechanismus von Drittanbietern UI-Router, wie im folgenden Codeblock gezeigt:

.state("main.list",angularAMD.route({
    url : '/list/:params',//url &参数
    views : {
      "header@main" : angularAMD.route({
        templateUrl : 'simple/view/main/html/main/Header.html',
        controller:'HeadController',
        controllerUrl:[ ****.js
                  ]
      }),
      "menu@main" : angularAMD.route({
        templateUrl : 'simple/view/main/html/main/MenuModule.html',
        controller : "MenuController",
        controllerUrl:[ ****.js]
      }),
      "mainContent@main":angularAMD.route({
        templateUrl : 'simple/view/main/html/main/MainContent.html'
      })
    }
  }))

Der erste Teil von die Funktion state() Der erste Parameter ist die Route. „main.list“ ist ein verschachtelter Routing-Mechanismus. Wenn die Seite zur Route „main.list“ springt, werden die Module und ihre Ressourcen (HTML, JS usw.) aufgerufen. und laden Sie dann die Module und Ressourcen (HTML, JS usw.) unter dem Status („main.list“), um die Routing-Verschachtelung zu implementieren

react-router

-Zuerst der vorherige Codeabschnitt

<Router history={ hashHistory }>
  <Route path=&#39;/&#39; component={CoreLayout}>
  <IndexRoute component={HomeView}/>
  <Route path=”/HODE_ROUTE/:param“ component={HomeView}/>
  <Route path=“ /AUDIT_ROUTE/:param" component={AuditView}/>
  <Route path=“/CHART_ROUTE” component={ChartView}/>
  </Route>
</Router>

React-router implementiert die Router-Verschachtelung in Form einer JSX-Syntax ähnlich der DOM-Struktur; AngularJs Der UI-Router scheint sehr unterschiedlich zu sein, aber tatsächlich sind die Ideen ähnlich;

Angulars Implementierungslogik:

Jump=》state=》module =》statische Ressource (js, css, html) =》zeigen (Seitenanzeige)

React-Router-Implementierungslogik:

jump=》path=》component= 》statische Ressource (js, css, html) =》show (Seitenanzeige)
In diesem Artikel geht es hauptsächlich um React-Router. Im Folgenden finden Sie eine kurze Einführung in die Verwendungssituation von React-Router:

react-router wird häufig für den Einstieg in Komponenten verwendet

Nested Routing

<Router history={hashHistory}>
 <Route path="/" component={App}>
  <Route path="/repos" component={Repos}/>
  <Route path="/about" component={About}/>
 </Route>
</Router>

Im obigen Code greift der Benutzer auf /repos zu, die App-Komponente wird zuerst geladen und dann wird die Repos-Komponente darin geladen.

<App>
 <Repos/>
</App>

Die Unterroute kann auch nicht in die Router-Komponente geschrieben werden, und das Routenattribut der Router-Komponente kann separat übergeben werden

let routes = <Route path="/" component={App}>
 <Route path="/repos" component={Repos}/>
 <Route path="/about" component={About}/>
</Route>;

<Router routes={routes} history={browserHistory}/>

Pfadattribut

Das Pfadattribut der Routenkomponente gibt die passenden Regeln der Route an. Siehe das Beispiel unten

<Route path="inbox" component={Inbox}>
  <Route path="messages/:id" component={Message} />
</Route>

Wenn der Benutzer im obigen Code auf /inbox/messages/:id zugreift, wird die folgende Komponente geladen.

<Inbox>
 <Message/>
</Inbox>

IndexRoute-Komponente

Ähnlich wie index.html wird die Komponente standardmäßig wie folgt geladen Code lädt standardmäßig die Home-Komponente.

<Router>
 <Route path="/" component={App}>
  <IndexRoute component={Home}/>
  <Route path="accounts" component={Accounts}/>
  <Route path="statements" component={Statements}/>
 </Route>
</Router>

Wenn der Benutzer nun auf / zugreift, sieht die geladene Komponentenstruktur wie folgt aus.

<App>
 <Home/>
</App>

Redirect-Komponente

Redirect-Komponente wird für Routensprünge verwendet, d. h. wenn der Benutzer auf eine Route zugreift, Es springt automatisch zu einer anderen Route.

<Route path="inbox" component={Inbox}>
 {/* 从 /inbox/messages/:id 跳转到 /messages/:id */}
 ＜Redirect from="messages/:id" to="/messages/:id" />
</Route>

Greifen Sie nun auf /inbox/messages/5 zu und es wird automatisch zu /messages/5 gesprungen.

Link

Die Link-Komponente wird verwendet, um das Tag a zu ersetzen und einen Link zu generieren, sodass Benutzer nach dem Klicken zu einer anderen Route springen können. Es handelt sich im Grunde um eine React-Version eines Tags, das den Status des Routers empfängt.

Formularverarbeitung

Die Link-Komponente wird für normale Benutzerklicksprünge verwendet, manchmal sind jedoch auch Vorgänge wie Formularsprünge und Schaltflächenklicksprünge erforderlich. Wie verbinde ich diese Situationen mit React Router?

Die erste Möglichkeit besteht darin, browserHistory.push

 handleSubmit(event) {
  event.preventDefault()
  const userName = event.target.elements[0].value
  const repo = event.target.elements[1].value
  const path = `/repos/${userName}/${repo}`
  browserHistory.push(path)
 }

${userName} ein Backend zu verwenden Die häufigste Methode zum Schreiben von Ausdrücken in der Sprache besteht darin, die Variablen in der Zeichenfolge abzurufen

 handleSubmit(event) {
  // ...
  this.context.router.push(path)
 },

Die zweite Methode besteht darin, das Kontextobjekt zu verwenden.

export default React.createClass({

 // ask for `router` from context
 contextTypes: {
  router: React.PropTypes.object
 },

 handleSubmit(event) {
  // ...
  this.context.router.push(path)
 },
})

Kollaborative Router-Dateiverwaltung für mehrere Personen

Im Allgemeinen a Projekt wird Es gibt eine einheitliche Router-Datei, die einem Router-Pool entspricht. Verschiedene Anforderungen fordern den passenden Pfad im Router-Pool an und laden die für die Anforderung erforderliche Seite. Aber. . . Jeder Entwickler, der eine Komponente entwickelt, muss das Routing konfigurieren, was die Verwaltung der Router-Datei erschwert und leicht zu Konflikten oder sogar Fehlern führen kann. Also. . Möglicherweise kann für eine XXX.router-Datei in jedem Komponentenordner eine Hook-Funktion ausgelöst werden, wenn der Front-End-Code gepackt und online hochgeladen wird, und die XXX.router-Datei kann in der zentralen Router-Datei vereinheitlicht werden, wodurch Multi vermieden wird -Personenoperationen.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von React-Router zur Implementierung des Front-End-Routings. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!