Maison > interface Web > js tutoriel > Analyse simple du routage du routeur de réaction

Analyse simple du routage du routeur de réaction

不言
Libérer: 2018-07-13 16:26:43
original
2009 Les gens l'ont consulté

Cet article présente principalement une analyse simple du routage de réaction-routeur, qui a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Ce que nous voulons, c'est une simple réaction -. Routage de routeur

Ce que nous voulons, c'est un simple routage de réaction-routeur

Je suis habitué à l'utilisation du routage vue-router, et il semble toujours assez gênant d'utiliser à nouveau réagir-routeur.

Alors, existe-t-il un moyen d'utiliser React avec un simple plug-in de routage comme vue-router ?

Qu'elle soit là ou non, j'ai déjà construit la roue, veuillez l'accepter.

react-concise-router

react-concise-router est un plug-in de routage basé sur le package React-Router v4.x.

1. Installer

Installer directement

npm install -S react-concise-router
Copier après la connexion

Vous devez également installer

npm install -S react-router
Copier après la connexion
npm install -S react-router-dom
Copier après la connexion

2 . Définir l'objet de liste de routes

router.js

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
Copier après la connexion

App.jsx

import React from 'react'
import router from './router'

export default class App extends React.Component {
  render () {
    return (
      <p>
        <p>wellcome !</p>
        <router.view />
      </p>
    )
  }
}
Copier après la connexion

API

nouveau routeur (options) Créez un objet de routage et renvoyez le routeur.

  • options objet de configuration de routage

  • options.mode chaîne définit le type de routage, hash|history

  • options.routes liste des routes du tableau

  • options.routes[].name chaîne nom de la route, si l'attribut enfants existe actuellement, il représente le nom de sortie de la route

  • options.routes[].path chaîne chemin

  • options.routes[].component Fonction composant de routage ; si l'attribut enfants existe actuellement, il représente le composant de sous-routage

  • options.routes [].children liste de sous-routes du tableau

n'existe pas ou est options.path La route sera traitée comme une route. route notMath, correspondant à 404*
router

  • router.route(route) Générer l'URL pour history.push.

  • router.beforeEach(cxt, next) Middleware de commutation de route

router.view

est un composant d'exportation de routage. <router.view />

props

  • props.name sous-nom d'exportation de route de chaîne, défini par défaut dans . options.routes[].name

router.link

est un composant similaire à router.link. Link

props

  • props.to objet|chemin de chaîne ou route d'objet de chemin.

router.beforeEach

est un middleware de routage, vous pouvez effectuer certains événements de commutation de routage tels que l'interception d'autorisation, la redirection, l'attente et d'autres opérations ; router.beforeEach

Vous devez le définir comme une fonction

router.beforeEach = function (ctx, next) {}
Copier après la connexion
  • ctx Il s'agit d'un objet contextuel, {route, router, history, . .}

  • suivant Il s'agit d'une fonction de rappel, veuillez l'appeler à la fin peut accepter un chemin de chaîne ou un objet, afin qu'il puisse être redirigé ; vers d'autres itinéraires. next

route

  • route.name chaîne nommée nom de la route, a priorité sur path

  • route.path chemin de chaîne

  • route.params objet paramètre de route objet

  • route.query objet chaîne de requête objet

  • route.hash hachage de lien de chaîne

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Analyse des composants et des accessoires React

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal