react封装路由表

最新推荐文章于 2025-06-01 12:14:36 发布

原创最新推荐文章于 2025-06-01 12:14:36 发布 · 3.1k 阅读

3 ·

CC 4.0 BY-SA版权

封装路由表

import React, { Component } from 'react';
import {Switch, Route, Redirect} from 'react-router-dom';

class RouterView extends Component {
    render() {
        let {routes} = this.props;	//取到传进来的路由表
        let rdArr = routes.filter(item=> item.redirect);	//把所以路由重定向取出来
        let rdCom = rdArr.map((item,key)=><Redirect from={item.path} to={item.redirect} key={key} />);
        return (
            <Switch>
                {
                    routes.map((item,key)=> !item.redirect && <Route path={item.path} key={key} render={(props)=><item.component {...props} routes={item.children} />} />).concat(rdCom)
                }
            </Switch>
        );
    }
}
export default RouterView;

调用

import RouterView from './router/RouterView';	//封装的组件
import routes from './router/routerConfig';	//路由表

// 把路由表引进来传进去
<RouterView routes={routes.routes} />

路由表格式

routes: [
        {
            path: '/home',
            component: Home
        },
        {
            path: '/index',
            component: Index,
            children: [
                {
                    path: '/index/hot',
                    component: Hot
                },
                {
                    path: '/index/cold',
                    component: Cold
                },
                {
                    path: '/index',
                    redirect: '/index/hot'
                }
            ]
        },
        {
            path: '/',
            redirect: '/index'
        }
    ]