react使用4.X路由，如何写出底部导航栏

大型的网站写的移动端项目都会有底部的导航，比如，京东

学会写导航真的还是挺重要的！今天就来使用react的路由来实现下面的底部导航

我实现的效果是这样的：

 

 

说在前面：

1. 路由安装可以参考链接：https://reacttraining.com/react-router/web/guides/quick-start
2. 实现路由注册都可以在以上的连接中查到

一、创建一个js文件routeList.js，用来存放route的配置项：

// 引入路由对应的模块
import Home from "../pages/Home"
import Login from "../pages/Login"
import Col from "../pages/Col"
import Cart from "../pages/Cart"
import Buy from "../pages/Buy"


const routes = [
  {
    path: "/",
    component: Home,
    exact : true
  },
    {
      path: "/home",
      component: Home,
      // exact : true
    },
    {
        path: "/col",
        component: Col
      },
      {
        path: "/cart",
        component: Cart
      },
      {
        path: "/buy",
        component: Buy
      }, 
    {
      path: "/login",
      component: Login,
    //   routes: [
    //     {
    //       path: "/tacos/bus",
    //       component: Bus
    //     },
    //     {
    //       path: "/tacos/cart",
    //       component: Cart
    //     }
    //   ]
    },

  ];


  export default routes

二 、在App.js 中引入routeList.js，将路由遍历进行注册

import React, { Component } from 'react';
import { BrowserRouter as Router } from "react-router-dom";
import routeCon from "./model/routeCon"
import  RouteWithSubRoutes from "./components/routeWithSubRoutes"
import Tabbar from "./components/tabbar"
import "./static/iconfont.css"
class App extends Component {
  render() {
    return (
      <Router>
        <div>

            <Tabbar />

           
            {
              routeCon.map((item,key)=>{
                
                return(

                  <RouteWithSubRoutes key={key} {...item}/>
                  
                ) 
              })
            }
        </div>

      </Router>
    );
  }
}



// routeWithSubRoutes.js 文件内容用来注册路由

import React from 'react';
import {Route } from "react-router-dom";


export default  function RouteWithSubRoutes(route) {
    return (
      
      <Route
        path={route.path}
        exact ={route.exact}
        render={props => (
          // pass the sub-routes down to keep nesting
          <route.component {...props} routes={route.routes} />
        )}
      />
    );
  }
  
export default App;

三、新建一个tabbar文件夹 创建文件index.js 和 index.css

 

onClick={()=>this.itemChange(key)}  能确定当前点击的是哪一个组件

• index.js：

import React, { Component } from 'react'

import {  Link } from "react-router-dom";

import "./index.css"



const tabbarArr =[
    
    {
        img:'icon-home',
        text:'首页',
        path: "./home"
    },
    {
        img:'icon-fenlei',
        text:'分类',
        path: "./col"
    },
    {
        img:'icon-gouwuche',
        text:'购物车',
        path:"./cart"
    },
    {
        img:'icon-yonghu',
        text:'用户',
        path: "./login"
    },


]


export default class Tabbar extends Component {
  constructor(props){
      super(props)
      this.state = {
          index:0
      }
  }  
  render() {
    return (
      <div className="tabbar">
        <div className="tabbar-content">
            {
                tabbarArr.map( (item,key)=>{
                    return(   
                        <Link to={item.path} className={"tarbar-item " + (this.state.index === key ? 'active' : '')} key={key} onClick={()=>this.itemChange(key)}>
                                <div className={'iconfont '+ item.img}></div>
                                <p>{item.text}</p>
                        </Link>
                    )
                })
            }
        </div>
    
      </div>
    )
  }


  itemChange(key){
     this.setState({
         index: key
     })
  }
}

• index.css

.iconfont{
    font-size: 26px !important;
}

.tabbar{
    position: fixed;
    width: 100%;
    height: 50px;
    /* line-height: -1.5; */
    bottom: 0;
    /* box-sizing: border-box; */
    /* padding: 5px 0; */
    border-top: 1px solid #eee
}
.tabbar-content{
    display: flex;
    width: 100%;
}
.tarbar-item{
    flex: 1;
    text-align: center;
    font-size: 12px;
}
a{
    display: block;
    text-decoration: none;
    color: #999;
    transition: color 0.3s;
}
a:active, a:hover {
    text-decoration: none;
    outline: 0;
}
a:active {
    color: rgb(168, 67, 67)
}
a:hover {
    color: red
}
.active{
    color: red
}

四、将Tabbar引入到App.js文件中就可以了

 

 

这里要注意的是：使用哪个组件一定要在当前使用的位置进行引入，不然会报错的！