react中npm怎么安装路由

96 阅读 0 评论 64 点赞

我是靠谱客的博主专一小鸭子，最近开发中收集的这篇文章主要介绍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>
}
登录后复制

这样就实现了，更新视图但不重新请求页面。如果想了解更多可以点击查看官方文档。

推荐学习：《react视频教程》

以上就是react中npm怎么安装路由的详细内容，更多请关注靠谱客其它相关文章！