React 封装路由表


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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM