Maison > interface Web > Questions et réponses frontales > Comment installer le routage dans npm en réaction

Comment installer le routage dans npm en réaction

WBOY
Libérer: 2022-04-21 15:43:05
original
1827 Les gens l'ont consulté

Dans npm in React, vous pouvez utiliser "npm i react-router-dom -S" pour installer le routage ; le paramètre i est l'abréviation de install, qui détectera le numéro de version du package npm qui correspond le mieux à la version actuelle. le paramètre "-S" est "-- L'abréviation de "save" écrira le module dans packages.json.

Comment installer le routage dans npm en réaction

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

Comment installer le routage dans npm dans React

1. Installation du routage React

npm i react-router-dom@5.0 -S
Copier après la connexion

Une fois l'installation terminée, entrez App.js pour citer

Importer les composants liés au routage (la première lettre doit être en majuscule)

Importer un alias de routage de hachage

Page de routage d'itinéraire

Lien de navigation NavLink

import { HashRouter as Router, Route, NavLink} from 'react-router-dom'
Copier après la connexion

2. Utilisation du routage de réaction

Exemple :

import {HashRouter as Router , Route , NavLink} from 'react-router-dom'
function App(){
return (<Router >
{/* 导航 */}
<div>
{/*exact 默认显示*/}
<NavLink to=&#39;/&#39; exact>首页</NavLink>
<NavLink to=&#39;/about&#39;>关于</NavLink>
</div>
{/* 路由页面 */}
<Route  path="/" exact component={Home}></Route >
<Route  path="/about" component={About}></Route >
</Router >)
}
export default App;
function Home(){
return <div>首页页面</div>
}
function About(){
return <div>关于页面</div>
}
Copier après la connexion

Ceci est réalisé en mettant à jour la vue mais sans redemander la page. Si vous souhaitez en savoir plus, vous pouvez cliquer pour consulter la documentation officielle.

Apprentissage recommandé : "Tutoriel vidéo 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