React路由基本的使用(一)
路由的基本使用
下载 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'));
最终效果 点击的路由的时候 可以高亮显示
React路由基本的使用(一)的更多相关文章
- react路由的安装及格式和使用方法
react路由的安装: 在要创建项目的目录命令窗里输入: cnpm install -g create-react-app create-react-app 项目名 在创建好的项目目录命令窗里输入: ...
- react router @4 和 vue路由 详解(七)react路由守卫
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 12.react路由守卫? a.在之前的版本中,React Router 也提供了类似的 ...
- react路由嵌套
所谓的嵌套路由就是在某些以及路由下面存在二级路由,这些二级路由除了公用一级路由导航模块外,还公用当前的二级路由的导航模块,也就是部分进行了切换,要实现嵌套路由,首先回顾之前的内容,实现基本的react ...
- react路由配置(未完)
React路由 React推了两个版本 一个是react-router 一个是react-router-dom 个人建议使用第二个 因为他多了一个Link组件 Npm install react-ro ...
- React路由-基础篇
React-Router-DOM ReactRouter网址, 安装 -npmjs找到react-router-dom -yarn add react-router-dom 基本使用方法 1.创建一个 ...
- react 路由 react-router@3.2.1
react路由,4.x的差异还是比较大,暂时还是3.x的版本 安装: npm install -S react-router@3.x 配置: import { Router, Route, hashH ...
- React路由配置
React路由简单配置 //入口文件index.js import React from 'react'; import ReactDom from 'react-dom'; import { Rou ...
- 【React 8/100】 React路由
React路由 React路由介绍 现代的前端应用大多数是SPA(单页应用程序),也就是只有一个HTML页面的应用程序.因为它的用户体验更好.对服务器压力更小,所以更受欢迎.为了有效的使用单个页面来管 ...
- 我的一个react路由之旅(步骤及详图)
今天开始react一个重要部分的xiao~习,路由~(过程截图,最后附代码) 以下代码只能骗糊涂蛋子,没错,就是我自己,不要打算让我敲出多高级的东西~ 理论性知识几乎没有,请不要打算让我给你说原理啥的 ...
- 我的一个React路由嵌套(多级路由),路由传参之旅
在上一篇react路由之旅中,我们简单地配置了react,进行了react路由及相关知识的学习,引入以及实现一个局部跳转的功能,接下来就是深入学习路由的嵌套以及传参,这是工作中主要用要的. 我的rea ...
随机推荐
- mybatis源码学习(三)-一级缓存二级缓存
本文主要是个人学习mybatis缓存的学习笔记,主要有以下几个知识点 1.一级缓存配置信息 2.一级缓存源码学习笔记 3.二级缓存配置信息 4.二级缓存源码 5.一级缓存.二级缓存总结 1.一级缓存配 ...
- 配置Tomcat监听80端口、配置Tomcat虚拟主机、Tomcat日志
6月27日任务 16.4 配置Tomcat监听80端口16.5/16.6/16.7 配置Tomcat虚拟主机16.8 Tomcat日志扩展邱李的tomcat文档 https://www.linuser ...
- Java分割面板和选项卡面板的应用
1.分割面板 JSplitPane类的常用构造方法 构造方法 说明 JSplitPane() 创建一个默认的分割面板.默认情况下为在水平方向上分割,重绘方式为只在调整分隔条位置完成时重绘 JSplit ...
- mac 命令记录
1. 安装 mysqlworkbench brew search mysql brew tap caskroom/cask brew cask search mysql brew cask insta ...
- php mysql_connect 在同一host下多数据库mysql_select_db()的bug .
操作方法 创建两个数据库test1 test2 同一个host下面 分别在两个数据库中创建表 -- ---------------------------- -- Table structure fo ...
- AutoLayout的那些事儿
转自:http://www.cocoachina.com/ios/20160530/16522.html 本文投稿文章,作者:MangoMade(简书) AutoLayout非常强大也非常易用,可读性 ...
- Flask蓝图遇到的问题
欢迎加入python学习交流群 667279387 最近在使用flask开发一个业余学习项目,由于之前都是"小打小闹",整个程序都是放在一个文件夹里面的,也没有注意这个问题.这次项 ...
- Java修炼——内部类详解
内部类详解 定义:将一个类定义在另一个类的内部,该类就称为内部类 类中定义的内部类特点: 内部类作为外部类的成员,可以直接访问外部类的成员 (包括 private 成员),反之则不行. 内部类做为外部 ...
- 赌十包辣条,你一定没见过这么通透的ThreadLocal讲解
1.看个热闹 鉴于普罗大众都喜欢看热闹,咱们先来看个热闹再开工吧! 场景一: 中午了, 张三.李四和王五一起去食堂大菜吃饭.食堂刚经营不久,还很简陋,负责打菜的只有一位老阿姨. 张三:我要一份鸡腿. ...
- java面向对象基础知识
一.面向对象与面向过程的区别: ①所处的角色不同:前者指挥者,后者执行者:②所需知道的事情不同:前者知道哪些是做这些事情的人就可以,不需了解具体的事情操作的过程.后者需要具备应有的技能来做这些事情. ...