Heim > Web-Frontend > Front-End-Fragen und Antworten > So installieren Sie Routing in npm in React

So installieren Sie Routing in npm in React

WBOY
Freigeben: 2022-04-21 15:43:05
Original
1826 Leute haben es durchsucht

In npm können Sie „npm i react-router-dom -S“ verwenden, um Routing zu installieren. Der Parameter i ist die Abkürzung für „install“, mit der die Versionsnummer des npm-Pakets ermittelt wird, die am besten mit der aktuellen Version übereinstimmt Parameter „-S“ ist „-- Die Abkürzung von „save“ schreibt das Modul in packets.json.

So installieren Sie Routing in npm in React

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.

So installieren Sie Routing in npm in React

1. React-Routing-Installation

npm i react-router-dom@5.0 -S
Nach dem Login kopieren

Geben Sie nach Abschluss der Installation App.js ein, um Routing-bezogene Komponenten zu importieren (der erste Buchstabe muss großgeschrieben werden)

Hash-Routing-Alias-Router importieren

Routen-Routing-Seite

NavLink-Navigationslink

import { HashRouter as Router, Route, NavLink} from 'react-router-dom'
Nach dem Login kopieren

2. Verwendung von React-Routing

Beispiel:

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>
}
Nach dem Login kopieren

Dies wird erreicht, indem die Ansicht aktualisiert, die Seite jedoch nicht erneut angefordert wird. Wenn Sie mehr wissen möchten, können Sie hier klicken, um die offizielle Dokumentation anzuzeigen.

Empfohlenes Lernen: „

Video-Tutorial reagieren

Das obige ist der detaillierte Inhalt vonSo installieren Sie Routing in npm in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage