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;复制代码

最后效果