Analyse simple du routage du routeur de réaction

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

Vous devez également installer

npm install -S react-router

npm install -S react-router-dom

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

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

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

• 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

Comment utiliser JS pour implémenter un outil numérique simple horloge

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!