页面编写好,就需要路由和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属性,不然首页会一直是激活状态。