React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)
时间:2022-05-08
本文章向大家介绍React第三方组件1(路由管理之Router的使用②多层级跳转及重定向),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!
1、React第三方组件1(路由管理之Router的使用①简单使用)---2018.01.22
2、React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)---2018.01.23
3、React第三方组件1(路由管理之Router的使用③传参)---2018.01.24
4、React第三方组件1(路由管理之Router的使用④按需加载-上)---2018.01.25
5、React第三方组件1(路由管理之Router的使用⑤按需加载-下)---2018.01.26
开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
路由下面还有路由,如何实现?
今天来讲下多层级理由的实现及如何重定向!
比如我们需要实现,demo2,下面还有两个页面 demo2-1、demo2-2
我们打开demo2下面的Index.jsx 页面修改代码,如下:
import React from 'react';
import TodoList from './TodoList';
import {Route, NavLink} from 'react-router-dom'
const Index = () =>
<div>
<div className="nav">
<NavLink to="/demo2/demo2-1" activeClassName="selected" exact>demo2-1</NavLink>
<NavLink to="/demo2/demo2-2" activeClassName="selected" exact>demo2-2</NavLink>
</div>
<Route path="/demo2/demo2-1" component={TodoList}/>
<Route path="/demo2/demo2-2" component={TodoList}/>
</div>
;
export default Index;
我们就看下浏览器效果
已经实现了,但我们发现一个问题:
当点击demo2的时候,页面是空白的!
我们希望他默认选中demo2-1,也就是重定向到 demo2-1
我们优化下代码:
引入 Redirect
import {Route, NavLink, Redirect} from 'react-router-dom'
加入
<Route exact path="/demo2/"
render={() => (<Redirect to="/demo2/demo2-1"/>)}/>
看下浏览器效果
好,已经实现!
但又发现一个问题,demo2,没有变红,我们希望demo2,是变红的!
我们再来改下代码:
这次需要修改首页路由,如下:
去掉 exact 属性
<NavLink to="/demo2" activeClassName="selected">demo2</NavLink>
再看下浏览器
OK 实现!
我们再来优化下代码:
这里有很多相同一级名称,是可以优化下的!
这里我打印下 match,让大家更直观理解 match 是什么
- 从零开始内网安全渗透学习
- hive启动后相关操作
- 开源API测试工具 Hitchhiker v0.10 - 中文版
- 强大的API测试工具Hitchhiker v0.9 基于UI的断言测试,回顾2017
- 开源API测试工具 Hitchhiker v0.8 - 自动化测试结果统计
- 开源API测试工具 Hitchhiker v0.7更新 - Schedule的对比diff
- com.mysql.jdbc.exceptions.jdbc4.CommunicationsE...
- 简陋的swift carthage copy-frameworks 辅助脚本
- 【自问自答】关于 Swift 的几个疑问
- 高级PHP应用程序漏洞审核技术【一】
- 【读书笔记】The Swift Programming Language (Swift 4.0.3)
- Ubuntu 下mysql常用操作
- JDK1.8源码(五)——java.util.ArrayList 类
- 代码审计入门总结
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- sddm启动root登陆kde By HKL, Tuesd
- ELK收集处理Huawei/H3C交换机日志 By HKL,
- UniFi Register Device with keadhcp By HKL,
- Huawei esight to 钉钉dingding (RESTful API) By HKL,
- ngrokc rampis预编译版本 By HKL, Fr
- megacli修复raid1硬盘 By HKL, Tues
- DNSPOD自动更新公网IP脚本 By HKL, Wedn
- Zerotier网卡NAT via iptables By HKL,
- Github Pages同步到Qcloud腾讯云对象存储COS By HKL,
- 独家 | 探索性文本数据分析的新手教程(Amazon案例研究)
- OpenWRT通过3G Modem加asterisk将GSM通话转为SIP By HKL,
- Coding通过Jenkins生成jekyll并发布到腾讯云对象存储Qcloud COS By HKL,
- mybatis 实用技巧:<trim prefix="where" prefixOverrides="and|or">
- OpenWRT配置Webdav(s)共享文件 By HKL,
- OpenWRT配置Apache Webdav By HKL,