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 ()=>(
    <BrowserRouter>
        <Switch>
            <Route path='/home' component={Home}></Route>
            <Route path='/category' component={Category}></Route>
            <Route path='/car' component={Car}></Route>
            <Route path='/user' component={User}></Route>
        </Switch>
    </BrowserRouter>
)复制代码

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 (
      <div className="App">
        <RouterMap/>
      </div>
    );
  }
}

export default App;
复制代码

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

import React,{Component} from 'react'
import Tabbar from '../components/tabbar'

class Home extends Component{
    render(){
        return(
            <div>
                <Tabbar/>
            </div>
        )
    }
}

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(
            <div className="tabbar">
                <div className="tabbar-content">
                    {
                        tarbarArr.map((v,i)=>(
                            <Link to={v.link} key={i} className={"tabbar-item"+(url.indexOf(v.link)>-1?' active':'')}>
                                <div className={"iconfont "+v.img}/>
                                <div>{v.text}</div>
                            </Link>
                        ))
                    }
                </div>
            </div>
        );
    }
}

export default Tabbar;复制代码

最后效果