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

    为解决官方发布的软件包被别人更改或者软件在传输过程中出现传输错误等问题,软件官方在提供软件包的同时,还提供一个保存MD5校验码的文件. Linux/unix中可以使用如下命令获得校验码和官方的校验码对 ...

  2. Linux下安装Blender

    Blender在Windows下,可以在官方直接下载免安装的版本,下载解压缩就能用. 在Linux下稍微麻烦一点点. 如下3步安装的blender不一定是最新版本,且安装完成后发现设置中文会变为方块. ...

  3. (8)视图层参数request详解

    PS:浏览器页面请求的都是get请求 PS:post请求是通过form表单,阿贾克斯发 request里面的常用方法 def index(request): print(request.META) # ...

  4. JAVA 实用插件

    一.alibaba开发规约插件 https://p3c.alibaba.com/plugin/eclipse/update 下载地址 alibaba是个优秀的公司,这个插件能很好的规范代码,推荐给大家 ...

  5. js语言中的新发现和一些总结

    js中定义变量加var和不加var的区别 原创 2016年09月01日 10:17:33 标签: js 3658 这个问题其实我在面试的时候有被问到过,当时我记得我回答的很模糊,面试官看到我好像不太清 ...

  6. 几个方便的nodejs 任务调度框架

    摘录几个方便的nodejs 任务调度包 node-cron https://github.com/kelektiv/node-cron node-schedule https://github.com ...

  7. Atheros AR9285坑爹网卡仅仅有54M/65M,开启150M速率的方法

    版权声明:Max Sky 原创文章.转载时请保留全部权并以超链接形式标明文章出处.否则将追究相关法律责任. https://blog.csdn.net/maxsky/article/details/3 ...

  8. 修改VS2017模板文件,添加文件头部自定义注释

    找到Class.cs文件 找到VS2017安装目录下面的Class.cs文件,一般在C盘或者D盘 模块文件位置: 接口模版:C:\Program Files (x86)\Microsoft Visua ...

  9. 使用Managed Extensibility Framework方便的扩展应用程序

    概述 Managed Extensibility Framework(MEF)是.NET平台下的一个扩展性管理框架,它是一系列特性的集合,包括依赖注入(DI)以及Duck Typing等.MEF为开发 ...

  10. ASP.NET Core WebApi使用Swagger生成api说明文档

    1. Swagger是什么? Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件 ...