react路由嵌套
所谓的嵌套路由就是在某些以及路由下面存在二级路由,这些二级路由除了公用一级路由导航模块外,还公用当前的二级路由的导航模块,也就是部分进行了切换,要实现嵌套路由,首先回顾之前的内容,实现基本的react路由,如下所示:
基本路由
1,创建项目:npx create-react-app react-router
2,安装路由:npm install react-router-dom --save
3,整理src文件夹
4,在components文件夹下面新建Home.js和News.js组件。
5,在需要进行路由跳转的页面引入路由并配置,这里是根组件App.js
嵌套路由
在react嵌套路由是和基本路由一样的,例如下面我们想要在新闻下面分时政要闻和娱乐新闻,就需要在News.js组件下面进行路由配置了。
1,新建NewsOne.js和NewsTwo.js两个组件,和上面两个组件一样,只添加最基本的内容就可以了。
2,对News.js进行重新布局,左边放嵌套路由,右边展示内容切换。
3,在News.js中引入路由组件,并配置路由。
需要注意的是,因为这些二级嵌套路由是在News路由下的,所以在配置嵌套路由的时候,需要保证路由的路径完整。
此时已经实现了基本的嵌套路由了,但是当我们默认进入新闻页面的时候,显示还是有问题
这里默认时希望显示时政要闻的,所以需要对嵌套的路由配置进行修改:
其中exact用来限制严格匹配一定不能漏了。
完整代码下载:点这里
react路由嵌套的更多相关文章
- 我的一个React路由嵌套(多级路由),路由传参之旅
在上一篇react路由之旅中,我们简单地配置了react,进行了react路由及相关知识的学习,引入以及实现一个局部跳转的功能,接下来就是深入学习路由的嵌套以及传参,这是工作中主要用要的. 我的rea ...
- 十七、React路由嵌套:头部导航+侧边导航
一.概述 实现功能:点首页,展示首页,同时在左侧有个首页的各个栏目导航:点用户,同首页: 二.代码实现 1. src/App.js import React from 'react'; import ...
- 七天接手react项目 系列 —— react 路由
其他章节请看: 七天接手react项目 系列 react 路由 本篇首先讲解路由原理,接着以一个基础路由示例为起点讲述路由最基础的知识,然后讲解嵌套路由.路由传参,最后讲解路由组件和一般组件的区别,以 ...
- angular2系列教程(十一)路由嵌套、路由生命周期、matrix URL notation
今天我们要讲的是ng2的路由的第二部分,包括路由嵌套.路由生命周期等知识点. 例子 例子仍然是上节课的例子:
- vue 路由嵌套高亮问题
正常路由嵌套是没有问题的,但是如果你已经在当前主路由页面了,然后再次点击主路由就会出现页面数据空白的情况 看代码: //主路由通过v-for循环出来 <div class="list- ...
- Vue-Router路由 Vue-CLI脚手架和模块化开发 之 路由常用配置与路由嵌套
vue-router路由常用配置 1.mode:配置路由模式,默认为hash,由于URL很丑,可以修改为history,但是需要服务端的支持: 以上一篇的博文为实例: 初始时url的显示: 使用mod ...
- Angular中ui-router实现路由嵌套案例
学习 ui-router 资料整理 对于Angular内置的路由是单路由视图,ui-router可以实现路由嵌套.后面将会有一个案例概括前面所有资料整理 学习 ui-router - 管理状态 ht ...
- react路由的安装及格式和使用方法
react路由的安装: 在要创建项目的目录命令窗里输入: cnpm install -g create-react-app create-react-app 项目名 在创建好的项目目录命令窗里输入: ...
- vue学习路由嵌套
1. 路由嵌套和参数传递 传参的两种形式: a.查询字符串:login?name=tom&pwd=123 {{$route.query}} ------ <li><route ...
随机推荐
- P2331 [SCOI2005]最大子矩阵 (动规:分类讨论状态)
题目链接:传送门 题目: 题目描述 这里有一个n*m的矩阵,请你选出其中k个子矩阵,使得这个k个子矩阵分值之和最大.注意:选出的k个子矩阵不能相互重叠. 输入输出格式 输入格式: 第一行为n,m,k( ...
- HDU4328 Cut the cake(动规:最大子矩形问题/悬线法)
题目链接:传送门 题目大意: 给出N*M的字符矩阵(由字符B/R组成),求符合下图条件的子矩阵的最大周长. 1 ≤ N,M ≤ 1000. 思路: 悬线法. #include <iostream ...
- 压缩文件破解rarcrack-支持格式zip,rar和7z
Kali上没有,需要自己安装 apt-get install rarcrack 安装成功后, 新建一个文本文档,元素: <?xml version="1.0" encodin ...
- HDU 3635:Dragon Balls(并查集)
Dragon Balls Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tot ...
- java学习之动手实验
一, 1,JAVA的基本运行单位是类 2,类的成员:成员变量,构造方法,普通方法和内部类 3,成员变量种类:字符类型:char 布尔类型:boolean 数值类型:byte, ...
- 管道符和作业 shell变量 环境变量
管道符 | 前一个命令的输出,变成后一个命令的输入 ctrl +z 暂停 bg cmd 后台运行 fg # 调回前台 直接让程序进入后台,可以在后面加上 cmd &am ...
- ISCC的 Misc——WP
比赛已经结束了,自己做出来的题也不是很多,跟大家分享一下 Misc 第一题:What is that? 下载链接; 打开 解压 是一个图片 因为分值很少所以题和简单 观察图片是一个向下指的手 说明fl ...
- maven 总结整理(二)——download source code
当我们用maven下载jar包时,有时希望下载jar包的源代码,此时可以在pom.xml文件中,进行设置. <build> <finalName>WebProject&l ...
- 使用netstat、lsof查看端口占用情况
netstat netstat用来查看系统当前系统网络状态信息,包括端口,连接情况等,常用方式如下: netstat -atunlp,各参数含义如下: -t : 指明显示TCP端口 -u : ...
- (98)Address already in use: make_sock: could not bind to address 0.0.0.0:80
问题说明80端口被占用,用netstat -nlp |grep :80命令看看有什么进程占用了80端口,发现是httpd进程. 没想到安装了两个apache,我安装apache2.4的时候删除了2.2 ...