React路由基本的使用(一)
2024-08-31 12:46:55
路由的基本使用
下载 npm i -D react-router react-router-dom
APP.js
ps==>NavLink 选中的时候 可以高亮
demo 是你自己添加的一个类哈
activeClassName 点击的时候 可以高亮显示
import Chuli from "./components/Chuli"
import Clock from "./components/Clock"
import {Link,Route,NavLink} from "react-router-dom"
<NavLink to="/chuli" activeClassName="demo">Chuli</NavLink>
<NavLink to="/clock" activeClassName="demo">Clock</NavLink>
<Route path="/Chuli" component={Chuli}></Route>
<Route path="/Clock" component={Clock}></Route>
index.js(脚手架自带的哈)
// 路由新增加的
import {HashRouter,BrowserRouter} from "react-router-dom"
ReactDOM.render(
<BrowserRouter>
<App/>
</BrowserRouter>,
document.getElementById('root'));
最终效果 点击的路由的时候 可以高亮显示
最新文章
- ES6+ 现在就用系列(二):let 命令
- C++术语俗解
- jquery multiselect使用示例
- MongoDB与.NET结合使用二(安全)
- 如果你遇到,在IntelliJ IDEA里Ctrl+Alt+方向键用不了
- DLUTOJ 1033 Matrix
- 【转】SQLServer XML类型
- WinCE发展史
- linux+nginx+tomcat负载均衡,实现session同步
- (原)mkl的cblas_sgemm和cblas_dgemm
- CKEditor + CKFinder 实现编辑上传图片配置 (二)
- Handler总结
- [Discuz!] Discuz X1.5点击“发帖”出现XML代码的解决办法!
- detours express版本的使用
- 20155330 《网络攻防》 Exp4 恶意代码分析
- pthread_once重塑singleton模式
- 3. EM算法-高斯混合模型GMM
- JAVA 线程状态转换
- 4-30 HTML 细节摘录
- 算法笔记(c++)--关于01背包的滚动数组
热门文章
- 使用vuecli3发布npm包
- php 开山篇
- javaScript中的indexOf使用方法
- 性能达到原生 MySQL 七倍,华为云 Taurus 技术解读【华为云技术分享】
- react-native-splash-screen 隐藏statusbar
- go-channel处理高并发请求
- C#语言和SQL Server数据库技术_前四章错题
- [TimLinux] MySQL 导入sql文件数据慢的问题解决办法
- 了解一下Mysql分布式事务及优缺点、使用案例(php+mysql)
- C.Dominated Subarray