码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-04-24 20:28:09      阅读:401      评论:0      收藏:0      [点我收藏+]

标签:flex   content   play   isp   export   top   temp   设置   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>
)

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

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

标签:flex   content   play   isp   export   top   temp   设置   4.0   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!