react 项目教程 （路由跳转 Tabbar 制作）

下面我们来写一个tabbar 组件 （antd-mobiel 有这样的组件）

首先我们需要在src 新建一个目录 为components （放置我们的组件） 并创建index.js ->为了将我们的组件统一导出。

创建 Tabbar 文件夹， 并且在目录下创建index.js ->来构建我们的组件内容

目录结构图片

在components 的index中导出组件

export { default as Tabbar} from './Tabbar.js'

为了动态渲染tabbar ，需要在routes.js的每个路由下面配置 icon text 等数据方便渲染

准备工作 ->
从 iconfont 来找到自己想要的图标

这是我的项目要用到的图标

生成代码后我们吧代码复制到 tabbar.less 中。
并复制每个图标的代码 添加到routes中对应的页面中去。 我们遍历数组需要 设置isNav 来 判断是否要渲染为tabbar 则此时我的 routes如下

import {
  Home, Mall, Detail, Cart, Mine, Login, NoPages
} from './pages'

const routes = [{
  path: '/home',
  text: '首页',
  isNav: true,
  icon: '',
  component: Home
}, {
  path: '/mall',
  text : '商城',
  isNav: true,
  icon: '',
  component: Mall
}, {
  path: '/mine',
  text: '我的',
  isNav: true,
  icon: '',
  component: Mine
}, {
  path: '/cart',
  text: '购物车',
  isNav: true,
  icon: '',
  component: Cart
}, {
  path: '/login',
  component: Login
}, {
  path: '/mall/detail/:id',
  isNav: false,
  component: Detail
}, {
  path: '/404',
  isNav: false,
  component: NoPages
}
];
export default routes

在我们要渲染的界面导入Tabbar 并且在 底部引用
我们可以通过import routes from '你的routes路径'传递配置的路径参数，也可以通过 组件传参的方式 在App 中 的Tabbar 标签处传递参数
在我们渲染的时候 如果 isNav 为true 时才要生成tabbar
所以传递的参数应该是

import { Tabbar } from './components'
const tabbarRoutes = routes.filter(route => route.isNav === true)


         <footer>
           <Tabbar routes = {routes}/>
         </footer>

此时 我们在Tabbar 界面进行 打印的时候 ，浏览器会打印出

浏览器会打印出isNav为true的routes列表

实现点击效果有两种方式 一种是 Link 一种是 history

先写

第一种方式 NavLink

在Tabbar中

import React, { Component } from 'react'
import { NavLink as Link } from 'react-router-dom'
import './tabbar.less'
export default class Tabbar extends Component {
render() {
  console.log(this.props)
  return (
    <div className = "m-tabbar">
      {
        this.props.routes.map(route => {
          console.log(route)
          return(
            <Link 
            key={route.path} 
            to = {route.path} 
            className = 'tabbaritem'>

            <span 
            dangerouslySetInnerHTML = {{ __html: route.icon }}
            className = 'icon'
            ></span>

            <div className = "title" >{route.text}</div>
            </Link>
          )
        })
      }
    </div>
  )
}
}

这样就可以实现路由跳转。 to是你要跳转到的页面
为了样式的美观 可以为路由加上 样式 我们写在 tabbar.less 中
我们需要在文件中 引入 生成的icon代码 @font-face
并把显示icon 的span 的font-family 设置为 iconfont

@font-face {
//引入iconfont
  font-family: 'iconfont';  /* project id 943948 */
  src: url('//at.alicdn.com/t/font_943948_pcz8qvoxvxi.eot');
  src: url('//at.alicdn.com/t/font_943948_pcz8qvoxvxi.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_943948_pcz8qvoxvxi.woff') format('woff'),
  url('//at.alicdn.com/t/font_943948_pcz8qvoxvxi.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_943948_pcz8qvoxvxi.svg#iconfont') format('svg');
}
.m {
  &-tabbar{
    background-color: #f1f1f1;
    width: 100%;
    height: 12vw;
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    justify-content: space-around;
    .tabbaritem{
      .icon{
        font-family: 'iconfont';
//将span 的font-family 改成 icon
        color: #666666;
        font-size: 16px;
      }
      .title{
        margin-top:2vw;
        color: #666666;
      }
    }
    .active{
      .icon{
      color: #c81c28;
      }
      .title{
      color: #c81c28;      
      }
    }
  }
}

tabbar显示后如图

第二种方式

第二张方式不需要引入 react-router-dom

class Tabbar extends Component {
    // static getDerivedStateFramProps (props){  第一种方式通过外面传来的参数来进行操作
    //     return {
    //         currentTab: props.routes[0].path
    //     }
    // }
    // constructor(props){
    //     super(props);
    //     this.state = {
    //         currentTab : ''
    //     }
    // }
   onItemClick = (path) =>{
    this.props.history.push(path);
    // console.log(this.props);
   }
   render() {
      const currentPath = this.props.location.pathname;
      // console.log(currentPath);
      const detail = '/detail'
      // console.log(currentPath.indexOf(detail));
      if(currentPath.indexOf(detail)=== -1){
    return (

      <div className = "ani-tabbar ">
      {
          this.props.routes.map(route =>{
            const cls = (route.path === currentPath) ? 'ani-tabbar-item active' : 'ani-tabbar-item'
            //   const csl = route.path === this.state.currentTab
           return (
            <div 
            key = {route.path}
             className={cls}
             onClick = {this.onItemClick.bind(this,route.path)}
              >
              {/* {this.getIcon(route.path)} */}
            <span className='icon' dangerouslySetInnerHTML = {{__html : route.icon}}></span>
            <span className= "text">{route.title}</span>
            </div>
           ) 
        })
      } 
      </div>
    )}
    else{
      return (<div></div>)
    }
  }
    
}

完成工作后需要进行代码提交 用git git 可以在完成之前用
feat : xxxxxx
修复bug 用
fix： xxxxxx

下面我们要配置redux及 axios
>https://www.jianshu.com/p/2bda61916d11