react中npm怎麼安裝路由

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

本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。

react中npm怎麼安裝路由

一. react路由安裝

npm i react-router-dom@5.0 -S

安裝完成後進入App.js中引用

導入路由相關元件(首字母必須大寫)

導入雜湊路由別名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=&#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>
}

這樣就實作了，更新視圖但不重新要求頁面。如果想了解更多可以點選查看官方文件。

推薦學習：《react影片教學》

以上是react中npm怎麼安裝路由的詳細內容。更多資訊請關注PHP中文網其他相關文章！