create-react-app-路由基础复习--底部导航栏制作

基于路由和制作一个底部导航栏

//Tabbar.js
import React , { Component } from 'react';
import { Link , BrowserRouter as Router } from 'react-router-dom';
import './Tabbar.scss';
export default class Tabbar extends Component {
    constructor(props){
        if(props.routes && props.routes.length>=2){
            super(props);
        }else{
            throw new Error('routes length at least 2');
        }
        this.state = {
            num : 0
        }
    }

    render(){
        let {routes} = this.props;
        return (
            <div className="Tabbar">
                <Router className="Tabbar">
                    {
                        routes.map(({path , title , img , svg , fontColor , fontSelectedColor},index)=>{
                            return <Link to={path} onClick={()=>this.changeColor(index)} key={'Tabbar'+in