react中npm可以用“npm i react-router-dom -S”安裝路由;參數(shù)i是install的簡寫,會檢測與當前版本最匹配的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
安裝完成后進入App.js中引用
導入路由相關(guān)組件(首字母必須大寫)
導入哈希路由 別名router
Route 路由頁面
NavLink 導航鏈接
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 > {/* 導航 */} <div> {/*exact 默認顯示*/} <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)了,更新視圖但不重新請求頁面。如果想了解