Maison  >  Article  >  interface Web  >  Comment installer le routage dans npm en réaction

Comment installer le routage dans npm en réaction

WBOY
WBOYoriginal
2022-04-21 15:43:051771parcourir

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

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'

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

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!

Déclaration:
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