所谓的嵌套路由就是在某些以及路由下面存在二级路由,这些二级路由除了公用一级路由导航模块外,还公用当前的二级路由的导航模块,也就是部分进行了切换,要实现嵌套路由,首先回顾之前的内容,实现基本的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路由嵌套的更多相关文章

  1. 我的一个React路由嵌套(多级路由),路由传参之旅

    在上一篇react路由之旅中,我们简单地配置了react,进行了react路由及相关知识的学习,引入以及实现一个局部跳转的功能,接下来就是深入学习路由的嵌套以及传参,这是工作中主要用要的. 我的rea ...

  2. 十七、React路由嵌套:头部导航+侧边导航

    一.概述 实现功能:点首页,展示首页,同时在左侧有个首页的各个栏目导航:点用户,同首页: 二.代码实现 1. src/App.js import React from 'react'; import ...

  3. 七天接手react项目 系列 —— react 路由

    其他章节请看: 七天接手react项目 系列 react 路由 本篇首先讲解路由原理,接着以一个基础路由示例为起点讲述路由最基础的知识,然后讲解嵌套路由.路由传参,最后讲解路由组件和一般组件的区别,以 ...

  4. angular2系列教程(十一)路由嵌套、路由生命周期、matrix URL notation

    今天我们要讲的是ng2的路由的第二部分,包括路由嵌套.路由生命周期等知识点. 例子 例子仍然是上节课的例子:

  5. vue 路由嵌套高亮问题

    正常路由嵌套是没有问题的,但是如果你已经在当前主路由页面了,然后再次点击主路由就会出现页面数据空白的情况 看代码: //主路由通过v-for循环出来 <div class="list- ...

  6. Vue-Router路由 Vue-CLI脚手架和模块化开发 之 路由常用配置与路由嵌套

    vue-router路由常用配置 1.mode:配置路由模式,默认为hash,由于URL很丑,可以修改为history,但是需要服务端的支持: 以上一篇的博文为实例: 初始时url的显示: 使用mod ...

  7. Angular中ui-router实现路由嵌套案例

    学习 ui-router 资料整理 对于Angular内置的路由是单路由视图,ui-router可以实现路由嵌套.后面将会有一个案例概括前面所有资料整理 学习 ui-router - 管理状态  ht ...

  8. react路由的安装及格式和使用方法

    react路由的安装: 在要创建项目的目录命令窗里输入: cnpm install -g create-react-app create-react-app  项目名 在创建好的项目目录命令窗里输入: ...

  9. vue学习路由嵌套

    1. 路由嵌套和参数传递 传参的两种形式: a.查询字符串:login?name=tom&pwd=123 {{$route.query}} ------ <li><route ...

随机推荐

  1. P2331 [SCOI2005]最大子矩阵 (动规:分类讨论状态)

    题目链接:传送门 题目: 题目描述 这里有一个n*m的矩阵,请你选出其中k个子矩阵,使得这个k个子矩阵分值之和最大.注意:选出的k个子矩阵不能相互重叠. 输入输出格式 输入格式: 第一行为n,m,k( ...

  2. HDU4328 Cut the cake(动规:最大子矩形问题/悬线法)

    题目链接:传送门 题目大意: 给出N*M的字符矩阵(由字符B/R组成),求符合下图条件的子矩阵的最大周长. 1 ≤ N,M ≤ 1000. 思路: 悬线法. #include <iostream ...

  3. 压缩文件破解rarcrack-支持格式zip,rar和7z

    Kali上没有,需要自己安装 apt-get install rarcrack 安装成功后, 新建一个文本文档,元素: <?xml version="1.0" encodin ...

  4. HDU 3635:Dragon Balls(并查集)

    Dragon Balls Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tot ...

  5. java学习之动手实验

     一, 1,JAVA的基本运行单位是类 2,类的成员:成员变量,构造方法,普通方法和内部类 3,成员变量种类:字符类型:char        布尔类型:boolean     数值类型:byte, ...

  6. 管道符和作业 shell变量 环境变量

    管道符  |      前一个命令的输出,变成后一个命令的输入 ctrl +z   暂停 bg  cmd   后台运行 fg  #  调回前台 直接让程序进入后台,可以在后面加上 cmd    &am ...

  7. ISCC的 Misc——WP

    比赛已经结束了,自己做出来的题也不是很多,跟大家分享一下 Misc 第一题:What is that? 下载链接; 打开 解压 是一个图片 因为分值很少所以题和简单 观察图片是一个向下指的手 说明fl ...

  8. maven 总结整理(二)——download source code

    当我们用maven下载jar包时,有时希望下载jar包的源代码,此时可以在pom.xml文件中,进行设置. <build>    <finalName>WebProject&l ...

  9. 使用netstat、lsof查看端口占用情况

    netstat netstat用来查看系统当前系统网络状态信息,包括端口,连接情况等,常用方式如下:   netstat -atunlp,各参数含义如下:   -t : 指明显示TCP端口 -u : ...

  10. (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 ...