React 小案例路由跳转-白红宇

在上篇的基础上做路由跳转：

安装路由及代码：

安装：cnpm i -S react-router-dom

1.在pages里创建四个跳转页面

2.在src文件夹下创建router.js，router.js全部内容：

首先引入路由组件，

创建四个要跳转的<Route>标签，path是组建路径，component是组件名称

import React from 'react'import {BrowserRouter,Route,Switch} from 'react-router-dom'import Home from './pages/home'import Category from './pages/category'import Car from './pages/car'import User from './pages/user'export default ()=>(    
            
                 
                  
                  
                  
              
         
    )复制代码

3.App.js全部内容：

首先引入routerMap，将RouterMap标签渲染在页面上

import React, { Component } from 'react';import './App.css';import './static/iconfont.css'import RouterMap from './router'class App extends Component {  render() {    return (      
            
           
    
    );  }}export default App;复制代码

4.将之前的Tabbar导航引入每个页面组件，目的让每个页面下面显示导航

import React,{Component} from 'react'import Tabbar from '../components/tabbar'class Home extends Component{    render(){        return(            
                    
                 
    
        )    }}export default Home复制代码

5.修改之前tabbar组件的内容，

首先引入Link，然后使用Link代替要跳转的div标签，

删去之前div的点击事件，因为Link标签渲染出来有a标签的效果，

修改数组，增加一条每个分页面url的数据，利用不同的url形成不同的点击，辨别去哪是高亮显示，

给Link加一个to={v.link}，跳转至其他页面，

用const url = window.location.href; 获取当前页面的url

用加给路由 url.indexOf(v.link)>-1 监测当前url是否包含v.link中的地址判定如果包含就给当前Link标签添加active类

import React,{Component} from 'react'import {Link} from 'react-router-dom'import './index.css'const tarbarArr =[    {        img:'icon-home',        text:'首页',        link:'/home'    },    {        img:'icon-fenlei',        text:'分类',        link:'/category'    },    {        img:'icon-gouwuchekong',        text:'购物车',        link:'/car'    },    {        img:'icon-yonghu',        text:'我的',        link:'/user'    }]class Tabbar extends Component{    constructor(props){        super(props)        this.state={            index:0        }    }    render(){        const url = window.location.href;        return(            
                    
     
                          {                        tarbarArr.map((v,i)=>(                            
      -1?' active':'')}>                                
      
                                
      
       {v.text}
      
                                                    ))                    }                
     
            
    
        );    }}export default Tabbar;复制代码

安装路由及代码：

最后效果