react中npm怎么安裝路由

react中npm可以用“npm i react-router-dom -S”安裝路由；參數(shù)i是install的簡寫，會檢測與當(dāng)前版本最匹配的npm包版本號，參數(shù)“-S”是“–save”的簡寫，會把模塊寫入到packages.json中。

本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

react中npm怎么安裝路由

一. react路由安裝

npm i react-router-dom@5.0 -S

安裝完成后進(jìn)入App.js中引用

導(dǎo)入路由相關(guān)組件(首字母必須大寫)

導(dǎo)入哈希路由 別名router

Route 路由頁面

NavLink 導(dǎo)航鏈接

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

二. react路由的使用

實例：

import {HashRouter as Router , Route , NavLink} from 'react-router-dom' function App(){ return (<Router > {/* 導(dǎo)航 */} <div> {/*exact 默認(rèn)顯示*/} <NavLink to='/' exact>首頁</NavLink> <NavLink to='/about'>關(guān)于</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>關(guān)于頁面</div> }

這樣就實現(xiàn)了，更新視圖但不重新請求頁面。如果想了解