Maison  >  Article  >  interface Web  >  Comment installer le routage de réaction

Comment installer le routage de réaction

藏色散人
藏色散人original
2023-01-03 14:12:491550parcourir

Comment installer le routage React : 1. Installez le routage via "npm i react-router-dom@5.0 -S" ; 2. Utilisez "import { HashRouter as Router, Route, NavLink } from 'react-router-dom'" Importez simplement l'itinéraire.

Comment installer le routage de réaction

L'environnement d'exploitation de ce tutoriel : système Windows 10, react-router-dom version 5.0, ordinateur Dell G3.

Comment installer le routage React ?

installation de routage de réaction et utilisation simple

1. routage d'installation de réaction

Installation : npm je réagis-router-dom@5.0 -S (la dernière version est 6.0)

Importation :

import { HashRouter as Router, Route, NavLink } from 'react-router-dom'

Configuration de la route :

1. Tout le contenu lié au routage doit être placé dans le composant a7f2cf15f06fbef780c6b2609731da81

2 Utilisation du lien : 5f1e9f2f00cda64b74574e642a04e08d

3. composant ={Composant}>

Exemple : Saut d'itinéraire simple

function App() {
    return (<Router>
        <div>
              //exact 精确匹配
            <NavLink to=&#39;/&#39; exact>首页</NavLink>|
            <NavLink to=&#39;/about&#39; >关于</NavLink>
        </div>
        {/* 路由页面 */}
        <Switch>
            <Route path="/" exact component={Home}></Route>
            <Route path="/about" component={About}></Route>
        </Switch>
    </Router>)
}
export default App
 
function Home() {
    return <div>首页页面</div>
}
 
function About() {
    return <div>
         关于页面    
    </div>
}

2. Transfert des paramètres d'itinéraire

Formulaire de transfert des paramètres d'itinéraire

1. 2. Passage des paramètres ad14d8ca4868d89fdf601e3800bad992

3. Acquisition des paramètres props.match.params.id

Méthodes d'opération historiques couramment utilisées

1.go() enregistrement de saut historique

"

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