react第十五單元(react路由的封裝，以及路由數據的提取)

第十五單元(react路由的封裝，以及路由數據的提取)

#課程目標

1. 熟悉react路由組件及路由傳參，封裝路由組件能夠處理路由表
2. 對多級路由能夠實現封裝通用路由傳遞邏輯，實現多級路由的遞歸傳參
3. 對復雜的react應用，能夠提取路由表並使用路由組件簡化路由配置
4. 在路由組件中實現路由攔截功能

#知識點

1. 封裝路由組件

import React from 'react'; import {Switch, Route, Redirect} from 'react-router-dom'; export default (props)=>{ return <Switch> { props.routes.map((item, index)=>{ return <Route key={index} path={item.path} render={(props)=>{ if (item.children){ /** 渲染組件，類似於<Tab/> * ...props 把路由信息展開傳遞下去 * item.children 把子路由配置傳遞下去 */ return <item.component {...props} routes={item.children}/> }else{ return <item.component {...props}/> } }}></Route> }) } <Redirect exact from="/" to="/list"></Redirect> </Switch> } 

 

2. 路由表的配置

// 一級路由 import List from '../components/List'; import Detail from '../components/Detail'; // 二級路由 import Content from '../components/Content'; export default { routes: [{ path: '/list', component: List, children: [{ path: '/list/content', component: Content }] },{ path: '/detail', component: Detail }] } 

3. 根路由的渲染

// 封裝的類似與router-view的組件 import RouterView from './router/RouterView'; // 路由配置 import config from './router/router.co nfig'; ReactDOM.render(<Router> <RouterView routes={config.routes}></RouterView> </Router>, document.getElementById('root')); 

 

4. 包含子路由的路由渲染

<RouterView routes={this.props.routes}></RouterView> 

1

#授課思路

#案例和作業

1. 使用封裝路由實現抖音主頁面的配置及路由傳參

2. 使用封裝路由實現抖音頂部推薦和當前城市的切換