Einfache Analyse des React-Router-Routings

Dieser Artikel stellt hauptsächlich eine einfache Analyse des React-Router-Routings vor, die einen gewissen Referenzwert hat. Jetzt kann ich ihn mit allen teilen, die ihn brauchen.

Was wir wollen, ist eine einfache Reaktion. Router-Routing

Was wir wollen, ist ein einfaches React-Router-Routing

Ich bin an die Verwendung von Vue-Router-Routing gewöhnt und es fühlt sich immer ziemlich mühsam an, React-Router erneut zu verwenden.

Gibt es also eine Möglichkeit, React mit einem einfachen Routing-Plug-In wie Vue-Router zu verwenden?

Ob es da ist oder nicht, ich habe das Rad schon gebaut, bitte akzeptiere es.

react-concise-router

react-concise-router ist ein Routing-Plug-in, das auf dem React-Router v4.x-Paket basiert.

1. Installieren

Direkt installieren

Sie müssen auch installieren

npm install -S react-concise-router

rrreeRouting-Listenobjekt definieren

router.js

npm install -S react-router

App.jsx

npm install -S react-router-dom

API

neuer Router(Optionen ) Erstellen Sie ein Routing-Objekt und geben Sie den Router zurück.

• options Objekt Objekt der Routing-Konfiguration

• options.mode Zeichenfolge definiert den Routing-Typ , hash|history

• options.routesarray route list

• options.routes[].name String-Routenname, wenn das Attribut „Children“ derzeit vorhanden ist, stellt es den Routen-Exit-Namen dar

• options.routes[].path String-Pfad

• options.routes[].component Funktions-Routing-Komponente; wenn das untergeordnete Attribut derzeit vorhanden ist, stellt es die Unter-Routing-Komponente

• options.routes [].children

  Array-Unterroutenliste

existiert nicht oder ist

Die Route wird behandelt als eine notMath-Route, passend zu 404options.path*router

• router.route(route)

  URL für History.push generieren.

• router.beforeEach(cxt, next)

  Route Switching Middleware

router.view

ist eine Routing-Exportkomponente.

<router.view />

props

• props.name

  string route export subname, default 'default' set in . options.routes[].name

router.link

ist eine Komponente ähnlich zu

. router.linkLink

props

• props.to

  object|string path oder path object route.

router.beforeEach

ist eine Routing-Middleware, mit der Sie einige Routing-Switching-Ereignisse wie Autorisierungsabfang, Umleitung, Warten und andere Vorgänge durchführen können.

router.beforeEachSie sollten es als Funktion definieren

import Router from 'react-concise-router'
import Home from './views/Home'
import User from './views/User'
import UserInfo from './views/UserInfo'
import ErrorPage from './views/Error'
import view from './views/admin/view'
import Dashboard from './views/admin/Dashboard'

const router = new Router ({
  mode: 'hash',
  routes: [
    {path: '/', component: Home},
    {path: '/user', component: User},
    {path: '/user/:userId', name: 'info', component: UserInfo},
    {
      path: '/admin',
      component: view,
      name: 'admin-view',

      children: [
        {path: '/', component: Dashboard},
        {path: '/test', component: Dashboard},
        {component: ErrorPage}
      ]
    },
    {path: '*', component: ErrorPage},
  ]
})

export default router

• ctx

  Dies ist ein Kontextobjekt, {Route, Router, Verlauf,... }

• nächstes

  Dies ist eine Rückruffunktion, bitte rufen Sie sie am Ende auf; kann einen Zeichenfolgenpfad oder ein Objekt akzeptieren, das zu einem anderen Routing umleiten kann. next

route

• route.name

  Zeichenfolge mit dem Namen Routenname, hat Vorrang vor Pfad

• route.path

  String-Pfad

• route.params

  Objekt Routenparameterobjekt

• route.query

  Objektabfragezeichenfolgeobjekt

• route.hash

  String-Link-Hash

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Analyse von React-Komponenten und -Zuständen|Requisiten

Wie man JS verwendet, um eine einfache digitale Implementierung zu implementieren Uhr

Das obige ist der detaillierte Inhalt vonEinfache Analyse des React-Router-Routings. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!