站长资讯网
最全最丰富的资讯网站

react中npm怎么安装路由

react中npm可以用“npm i react-router-dom -S”安装路由;参数i是install的简写,会检测与当前版本最匹配的npm包版本号,参数“-S”是“–save”的简写,会把模块写入到packages.json中。

react中npm怎么安装路由

本教程操作环境: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='/' exact>首页</NavLink> <NavLink to='/about'>关于</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> }

这样就实现了,更新视图但不重新请求页面。如果想了解

赞(0)
分享到: 更多 (0)
网站地图   沪ICP备18035694号-2    沪公网安备31011702889846号