首页 > 其他 > 详细

React 封装路由表

时间:2020-04-02 22:13:06      阅读:379      评论:0      收藏:0      [点我收藏+]
import React, { Component } from ‘react‘
import { Route, Redirect, Switch } from ‘react-router-dom‘

export default class RouterView extends Component {
    render() {
        let { list } = this.props
        let newList = list.filter(item => !item.from)
        let redArr = list.filter(item => item.from)
        return (
            <div className = "view">
                <Switch>
 
      //渲染Route 并判断是否重定向,是否有二级路由的处理
                    {
                        newList.map((item, index) => {
                            let Com = item.com
                            return <Route key = { index } path = { item.path } render = { (pro)=> {
                                if (item.auth && !sessionStorage.getItem(‘user‘)) {
                                    return <Redirect to = {{
                                        pathname: ‘/login‘,
                                        params: {
                                            src: item.path
                                        }
                                    }}/>
                                } else if(item.children) {
                                    return <Com { ...pro } children = { item.children } arr = { item.children.filter(item => !item.from) }/>
                                } else {
                                    return <Com { ...pro }/>
                                }
                            }}/>
                        })
                    }
 
      //路由重定向
                    {
                        redArr.map((item, index) => {
                            return <Redirect key = { index } from = { item.from} to = { item.to }/>
                        })
                    }
                </Switch>
            </div>
        )
    }
}

React 封装路由表

原文:https://www.cnblogs.com/tian1206/p/12622733.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!