最近在用react router v4,记录一下
基本配置
import React from 'react'
import {BrowserRouter, Route, Switch} from 'react-router-dom'
import App from './App'
import Tips from './component/home/tips'
const Router = () => (
<main>
<BrowserRouter>
<Switch>
<Route exact path='/' component={App}/>
<Route exact path='/ttt/:id' component={Tips}/>
<Route render={() => '404'}/>
</Switch>
</BrowserRouter>
</main>
)
结合Antd Mobile的 TabBar
主要想法就是TabBar调的页面不用上路由,直接就组件的切换,固定为/
路由
![](https://img.haomeiwen.com/i2245742/707cc56e0e09ee38.png)
各个分页面的里面页面分别搞路由
然后在里面的页面中加入个返回按钮即可,返回到/
路由
![](https://img.haomeiwen.com/i2245742/ad4465185a57df7d.png)
路由传参
网上介绍的赶紧都有问题,
还是看官方文档
![](https://img.haomeiwen.com/i2245742/4c0b44bdbd79f674.png)
以下是我把
this.props
打印出来的信息![](https://img.haomeiwen.com/i2245742/4aef70b6275bd36e.png)
可以看到,路由传来的参数在
match.params
里
网友评论