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>
}

 

1. 路由表的配置

// 一级路由
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
    }]
}

1. 根路由的渲染

// 封装的类似与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'));

 

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

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

1

#授课思路

#案例和作业

1. 使用封装路由实现抖音主页面的配置及路由传参

2. 使用封装路由实现抖音顶部推荐和当前城市的切换