Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Bagaimana untuk memasang penghalaan dalam npm dalam tindak balas

Bagaimana untuk memasang penghalaan dalam npm dalam tindak balas

WBOY
Lepaskan: 2022-04-21 15:43:05
asal
1827 orang telah melayarinya

Dalam reaksi, npm boleh menggunakan "npm i react-router-dom -S" untuk memasang penghalaan; parameter i ialah singkatan pemasangan, yang akan mengesan nombor versi pakej npm yang paling sepadan dengan versi semasa; , dan parameter "-S" Ia adalah singkatan daripada "--save", yang akan menulis modul ke dalam packages.json.

Bagaimana untuk memasang penghalaan dalam npm dalam tindak balas

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.

Cara memasang penghalaan dalam npm dalam reaksi

1. Pemasangan penghalaan bertindak balas

npm i react-router-dom@5.0 -S
Salin selepas log masuk

Selepas pemasangan selesai, masukkan App.js untuk memetik

Import komponen berkaitan penghalaan (huruf pertama mesti ditulis dengan huruf besar)

Import hash laluan alias penghala

Halaman penghalaan laluan

Pautan navigasi NavLink

import { HashRouter as Router, Route, NavLink} from 'react-router-dom'
Salin selepas log masuk

2. Penggunaan penghalaan tindak balas

Contoh:

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>
}
Salin selepas log masuk

Ini dicapai, mengemas kini paparan tetapi tidak meminta semula muka surat. Jika anda ingin mengetahui lebih lanjut, anda boleh klik untuk melihat dokumentasi rasmi.

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Bagaimana untuk memasang penghalaan dalam npm dalam tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan