从零开始搭建react项目（二）

页面编写好，就需要路由和tabbar组件来连接各个页面

（一）使用路由

执行：npm install react-router-dom --save 安装路由， 然后在app.js中引入路由，及页面。如下

import React from 'react';
import logo from './logo.svg';
import './App.css';

import Home from './pages/home/home'
import Mine from './pages/mine/mine'
import Trade from './pages/trade/trade'
import Peizi from './pages/peizi/peizi'
import Market from './pages/market/market'

import Login from './pages/login/login'
import Reg from './pages/login/reg'


import{ HashRouter as Router, Route, NavLink, Redirect} from 'react-router-dom';


class App extends React.Component {	//用类来注册组件
	constructor(props) {
		super(props)
		this.state = {
			
		}
	}	

	render() {
		return(
			<Router>
			    <Route path="/" component={Home} exact></Route>
			    <Route path="/mine" component={Mine}></Route>
			    <Route path="/peizi" component={Peizi}></Route>
			    <Route path="/trade" component={Trade}></Route>
			    <Route path="/market" component={Market}></Route>
			    <Route path="/login" component={Login}></Route>
			    <Route path="/reg" component={Reg}></Route>
			</Router>
		)
	}
}

export default App;

<Route path="/" component={Home} exact></Route>中的exact表示指定path只有在访问'/'的时候才展示，必须加这个不然访问根路径的情况下渲染的组件默认为undefined，导致页面空白。

顺便说下路由传参：（参考这里）

1.params

<Route path='/path/:name' component={Path}/>
<link to="/path/2">xxx</Link>
this.props.history.push({pathname:"/path/" + name});
读取参数用:this.props.match.params.name

优势 ： 刷新地址栏，参数依然存在
缺点:只能传字符串，并且，如果传的值太多的话，url会变得长而丑陋。

2、query

<Route path='/query' component={Query}/>
<Link to={{ path : ' /query' , query : { name : 'sunny' }}}>
this.props.history.push({pathname:"/query",query: { name : 'sunny' }});
读取参数用: this.props.location.query.name

优势：传参优雅，传递参数可传对象；
缺点：刷新地址栏，参数丢失

3、state

<Route path='/web/departManange ' component={DepartManange}/>
<link to="web/departManange?tenantId=12121212">xxx</Link>
this.props.history.push({pathname:"/web/departManange?tenantId" + row.tenantId});
读取参数用: this.props.location.search

优缺点同query

4、search

<Route path='/web/departManange ' component={DepartManange}/>
<link to="web/departManange?tenantId=12121212">xxx</Link>
this.props.history.push({pathname:"/web/departManange?tenantId" + row.tenantId});
读取参数用: this.props.location.search

优缺点同params

（二）创建tabbar组件及图标高亮

在component文件夹下创建tabbar.js组件，如下：

/*tabbar组件*/
import React from 'react';
import './tabbar.css'
import {NavLink} from 'react-router-dom'

import home_img from '../../assets/images/tabbar/home.png'
import home_fill_img from '../../assets/images/tabbar/home_fill.png'
import market_img from '../../assets/images/tabbar/market.png'
import market_fill_img from '../../assets/images/tabbar/market_fill.png'
import trade_img from '../../assets/images/tabbar/trade.png'
import trade_fill_img from '../../assets/images/tabbar/trade_fill.png'
import peizi_img from '../../assets/images/tabbar/peizi.png'
import peizi_fill_img from '../../assets/images/tabbar/peizi_fill.png'
import mine_img from '../../assets/images/tabbar/user.png'
import mine_fill_img from '../../assets/images/tabbar/user_fill.png'


class Tabbar extends React.Component{	//icon用背景处理
	constructor(props){
		super(props)
		this.state = {
			tabIndex: 0,
			tab: [{id: 0,name: '首页',path: '/',icon: ''},
			{id: 1,name: '行情',path: '/market',icon: 'tabbar-icon2'},
			{id: 2,name: '交易',path: '/trade',icon: 'tabbar-icon3'},
			{id: 3,name: '配资',path: '/peizi',icon: 'tabbar-icon4'},
			{id: 4,name: '我的',path: '/mine',icon: 'tabbar-icon5'}]
		}
	}
	
	componentDidMount(){
		//console.log(this.state)
	}
	
	render(){
		return (
			<div>
				<div className="kong"></div>
				<div className="tabbar-box flex-h flex-hc">
					{this.state.tab.map((item,index)=>{
						return  <NavLink to={item.path} exact={index===0} className="tabbar-item" key={item.id}>
									<i className={'tabbar-icon1 '+item.icon}></i>
									<p className="lights">{item.name}</p>
								</NavLink>
					})}
				</div>
			</div>
		)
	}
}

export default Tabbar

css：

.tabbar-box{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: .22rem 0;
	background-color: #0C1537;
	z-index: 1;
}
.tabbar-item{text-align: center; margin: 0 .45rem; font-size: .22rem; color: #6D778F;}
.tabbar-icon{width: .32rem; height: .32rem;}
.light,.active .lights{color: #3974F9;}
.kong{height: 1.41rem;}


/*用icon处理*/
.tabbar-icon1{
	display: inline-block;
	width: .32rem; 
	height: .32rem; 
	background-image: url(../../assets/images/tabbar/home.png);
	background-repeat: no-repeat;
	background-size: 100%;
}
.tabbar-icon2{background-image: url(../../assets/images/tabbar/market.png);}
.tabbar-icon3{background-image: url(../../assets/images/tabbar/trade.png);}
.tabbar-icon4{background-image: url(../../assets/images/tabbar/peizi.png);}
.tabbar-icon5{background-image: url(../../assets/images/tabbar/user.png);}

.active .tabbar-icon1{background-image: url(../../assets/images/tabbar/home_fill.png);}
.active .tabbar-icon2{background-image: url(../../assets/images/tabbar/market_fill.png);}
.active .tabbar-icon3{background-image: url(../../assets/images/tabbar/trade_fill.png);}
.active .tabbar-icon4{background-image: url(../../assets/images/tabbar/peizi_fill.png);}
.active .tabbar-icon5{background-image: url(../../assets/images/tabbar/user_fill.png);}

组件高亮利用路由激活的时候会给当前的路由标签加上active类名来做（也可以通过ActiveClassName来修改这个active类名），然后指定下active类下的图标和文字高亮就可以了。注意：必须给首页路由NAVLink增加exact属性，不然首页会一直是激活状态。