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 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
est un plug-in de routage basé sur le package React-Router v4.x.
Installer directement
npm install -S react-concise-router
Vous devez également installer
npm install -S react-router
npm install -S react-router-dom
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> ) } }
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 estrouteroptions.path
La route sera traitée comme une route. route notMath, correspondant à 404*
router.route(route) Générer l'URL pour history.push.
router.beforeEach(cxt, next) Middleware de commutation de route
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
est un composant similaire à router.link
. Link
props
props.to objet|chemin de chaîne ou route d'objet de chemin.
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
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.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
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!