React Router 4.0 ---- 嵌套路由和动态路由

  嵌套路由,从广义上来说,分为两种情况:一种是每个路由到的组件都有共有的内容,这时把共有的内容抽离成一个组件,变化的内容也是一个组件,两种组件组合嵌套,形成一个新的组件。另一种是子路由,路由到的组件内部还有路由。

  对于共有的内容,典型的代表就是网页的侧边栏,假设侧边栏在左边,我们点击其中的按钮时,右侧的内容会变化,但不管右侧的内容怎么变化,左侧的侧边栏始终存在。这个侧边栏就是共有内容,如下图所示

  这个共有内容要怎么处理? 首先想到的就是把这个功能提取出来,写成一个组件,然后再把这个组件依次应用到其它路由组件,如about, products 等。导航栏肯定是一个导航,不过这里我们要使用navLink 组件,因为从图片中可以看到它有高亮显示,我们要设计一个高亮显示的样式。新建一个menus.js 文件,来写这个导航组件

import React from ‘react‘
// 引入NavLink 组件
import { NavLink } from "react-router-dom";
import ‘./menus.css‘

// 高亮的样式,表示我们在哪个导航下
const selectedStyle = {
  backgroundColor: ‘white‘,
  color: ‘slategray‘
}

// navLink, activeStyle 点击高亮显示当前标签。
export const MainMenu = () => (
  <nav className=‘main-menu‘>
    <NavLink to=‘/‘>首页</NavLink>
    <NavLink to=‘/about‘ activeStyle = {selectedStyle}>关于我们</NavLink>
    <NavLink to=‘/events‘ activeStyle = {selectedStyle}>企业事件</NavLink>
    <NavLink to=‘/products‘ activeStyle = {selectedStyle}>公司产品</NavLink>
    <NavLink to=‘/contact‘ activeStyle = {selectedStyle}>联系我们</NavLink>
  </nav>
)

  可以看到导航的高亮样式可以在NavLink 组件中直接设置,这也是Link 和NavLink的区别。这里还写了一点样式,在menus.css 文件中。

/* 页面左侧主要导航 */
.main-menu {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 20%;
  min-width: 20%;
  background-color: slategray;
  color: ghostwhite;
}

.main-menu  a {
  color: ghostwhite;
  text-align: center;
  padding: 1em;
  font-size: 1.5em;
}

  按照上面的说法,我们把这个组件应用到其它组件中,在pages.js中引入该组件,并修改Events,Products,

Contact和 About 组件中,引入的组件命名为MainMenu

// 企业事件内容
export const Events = () => (
    <div>
      <MainMenu></MainMenu>
      <section className="events">
        <h1>企业大事件</h1>
      </section>
    </div>
)

// 公司产品
export const Products = () => (
  <div>
    <MainMenu></MainMenu>
    <section className="products">
      <h1>公司产品:主要经营 手机、电脑</h1>
    </section>
  </div>
)

// 联系我们
export const Contact = () => (
  <div>
    <MainMenu></MainMenu>
    <section className="contact">
      <h1>联系我们</h1>
      <p>公司电话:0755 - 12345678</p>
    </section>
  </div>
)

  这时你会发现,相同的代码复制了4遍,还可以接受,毕竟只有一个共有组件。但如果about, home 这些组件有好多共有的部分,我们这样一遍一遍的复制就有点麻烦了。所以还要对page.js文件这些组件相同的内容进行进一步的抽取。抽取的形式应该是

<div>
    <MainMenu></MainMenu>
    // 变化的部分
  </div>

  现在最主要的部分就是这些变化的部分要怎么处理,想到了其实也很简单,因为React 有一个children 属性, 直接把这些变化的部分写成props.childern 就可以了。这时你会发现,这个抽取的组件像一个布局模板, 比如单页面应用时的页眉和页脚这些共有的部分,也可以放到这个模版中。新建一个template.js 文件

import React from ‘react‘
import { MainMenu } from "./menus";

export const Template = (props) => (
  <div className = ‘page‘>
    <MainMenu></MainMenu>
    {props.children}
  </div>
)

  上面的代码中加了一个样式类page, 在pages.css 中添加一个 page样式,

.page {
  display: flex;
  justify-content: space-between;
  height: 100%;
  margin-top: 20px;
}

  现在再在pages.js中的相应组件中应用Template组件

import { Template } from "./template";// 企业事件内容
export const Events = () => (
  <Template>
    <section className="events">
      <h1>企业大事件</h1>
    </section>
  </Template>

)

// 公司产品
export const Products = () => (
  <Template>
    <section className="products">
      <h1>公司产品:主要经营 手机、电脑</h1>
    </section>
  </Template>
)

// 联系我们
export const Contact = () => (
  <Template>
    <section className="contact">
      <h1>联系我们</h1>
      <p>公司电话:0755 - 12345678</p>
    </section>
  </Template>
)

  这时效果就达到了,左侧的侧边栏始终存在。

原文地址:https://www.cnblogs.com/SamWeb/p/8932931.html

时间: 2024-10-08 06:16:14

React Router 4.0 ---- 嵌套路由和动态路由的相关文章

react router 4.0以上的路由应用

thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr>td,.table>tbody>tr>th,.table>tbody>tr>td,.table>tfoot>tr>th,.table>tfoot>tr>td{padding:8px;line-height:1.4285714;ver

知识点:什么是交换机?什么是路由?什么是静态路由和动态路由?

说起交换机先要知道什么是局域网.交换机是组成局域网的最重要的设备,然后了解交换机在局域网中的作用. 局域网 家庭的网络,办公室的网络都属于局域网.局域网的产生是为了共享.共享上互联网.共享软件,共享打印机,共享文件等等.多台终端,包括手机.电脑.监控.打印机要组网,必须要交换机.交换机可以说就是一个信息交换中心,把终端需要的信息互相交换给对方.常见的局域网结构有总线型.星型.环型.日常用的最多的就是星型了,以交换机为中心,构成的星型局域网.如下图所示,核心部件就是交换机. 交换机 交换机顾名思义

网络工程实训_4RIP路由(动态路由)

实验4:RIP路由.包括RIPv1:RIPv2 动态路由协议包括距离向量路由协议和链路状态路由协议.RIP(Routing Information Protocol,路由信息协议)是使用最广泛的距离向量路由协议.RIP是为小型网络环境设计的,因为这类协议是路由学习及路由更新将产生较大的流量,占用过多的带宽.RIP 协议分为版本 1 和版本 2.不论是版本 1 或版本 2,都具备下面的特征:1. 是距离向量路由协议: 2. 使用跳数(Hop Count)作为度量值: 3.默认路由更新周期为 30

实验三 静态路由与动态路由

网络拓扑图如下: 对PC0配置IP地址如下: 对PC1配置IP地址如下: 对每个路由器都进行配置ip address操作 对路由器Router0操作如下: 配置两个接口的ip address 配置Router1的两个接口的ip address 配置Router2的两个接口的ip address 静态路由配置: 下一跳地址:在哪个路由器上配置的就将与那个路由器相连的线上的端口作为下一条的地址. 注意:操作中需要使用四条network命令才能将一个路由器的所有网络给配置完.配置成功后需要使用ping

配置静态路由和动态路由详解

配置路由信息的两种方式简单介绍: 因为路由器的默认路由表只有直连的路由信息,所以需要配置不是直连的路由信息. 配置路由,不明思义就是告诉路由器不知道的路由. 如图设置路由,目的为使R1能ping通R3,R3能ping通R1. 静态路由配置:ip address 目标网段号 子网掩码 下一跳ip R1: en conf t Ip address  192.168.2.0  255.255.255.0  192.168.1.2 R3: en conf t Ip address  192.168.1.

第6章 静态路由和动态路由(1)_静态路由

1. 路由--网络层实现的功能 1.1 路由功能 (1)网络层的功能:给传输层协议提供简单灵活的.无连接的.尽最大努力交付的数据包服务. (2)路由器为每一个数据包单独地选择转发路径,网络层并不提供服务质量的承诺.也就是说路由器直接丢弃传输过程中出错的数据包,如果网络中待发的数据包太多,路由器处理不了也直接丢弃,既不判断数据包重复,也不确保数据包按发送顺序到达终点. (3)路由就是路由器从一个网段到另一个网段转发数据包的过程.即在不同网段转发数据包就是路由.私网地址通过NAT技术将数据包发送到I

IP路由__动态路由

1.使用协议来查找网络并更新路由表的配置,就是动态路由.它比使用静态或默认路由方便,但它需要一定的路由器CPU处理时间和网络链接带宽.路由协议定义了路由器与相邻路由器通信时所使用的一组规则. 在互联网中经常使用两种类型的路由选择协议:内部网关协议(IGP)和外部网关协议(EGP).IGP用于在同一个自治系统(AS)中的路由器间交换路由选择信息.AS是一个基于共同管理域下的网络集合, 其基本的含义就是在同一个 AS中所有的路由器共享相同的路由表信息.EGP用于在AS之间通信.边界网状协议(BGP)

静态路由和动态路由的区别

    静态路由是指由网络管理员手工配置的路由信息.当网络的拓扑结构或链路的状态发生变化时,网络管理员需要手工去修改路由表中相关的静态路由信息.静态路由信息在缺省情况下是私有的,不会传递给其他的路由器.当然,网管员也可以通过对路由器进行设置使之成为共享的.静态路由一般适用于比较简单的网络环境,在这样的环境中,网络管理员易于清楚地了解网络的拓扑结构,便于设置正确的路由信息     使用静态路由的另一个好处是网络安全保密性高.动态路由因为需要路由器之间频繁地交换各自的路由表,而对路由表的分析可以揭示

静态路由和动态路由

现实生活中的路由表就是路牌,让你能够到达目的地.而计算机设备的数据要到达目标也需要有"路牌",在网络中这叫路由.把数据从源设备发送到下一台设备.路由就是"找路",是IP包转发路径信息.路由表就是多条路由信息的数据表. 静态路由 静态路由:静态路由是由管理员手工配置的,简单直接,是什么就是什么.缺点是当网络拓扑发生变化或有故障发生后,静态路由不会自更正,必需由管理员手工修改.适合小型网络,在路由条目较多的环境下容易出错,需要管理员手动配置,可能会出现环路. 有点像下面