So installieren Sie Routing in npm in React

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.

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

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'

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

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!