react router config 集中式路由管理（类似于vue-router）

最新推荐文章于 2022-11-22 09:16:33 发布

l-coder-dd

最新推荐文章于 2022-11-22 09:16:33 发布

阅读量513

点赞数

分类专栏：前端文章标签： react.js vue.js 前端

本文链接：https://blog.csdn.net/wq123123423432/article/details/120892215

版权

React react-router-config 动态路由 renderRoutes 路由数组

关键词由CSDN通过智能技术生成

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1 npm install react-router-config

2 import {renderRoutes, matchRoutes} from 'react-router-config';

3 路由数组

let routes = [ ];

import Mainlayout from '../page/MainLayout'
import SecondLayout_1 from '../page/SecondLayout_1'
import ThirdLayout_1 from '../page/ThirdLayout_1'
import ThirdLayout_2 from '../page/ThirdLayout_2'
const routesArray = [
    {
        path : "/",
        component : Mainlayout,
        // indexRoute : {component: lddlayout},
        routes : [
            {
                path : "/secondLayout_1",
                component : SecondLayout_1,
                routes : [
                    {
                        path : "/secondLayout_1ThirdLayout_1",
                        component : ThirdLayout_1,
                    },
                    {
                        path : "/secondLayout_1ThirdLayout_2",
                        component : ThirdLayout_2,
                    },
                ]
            }
        ]
    }
]
export default routesArray ;

import React from 'react'
import ThirdLayout_1 from '../page/ThirdLayout_1'
import ThirdLayout_2 from '../page/ThirdLayout_2'
import {Link, Route} from "react-router-dom";
import {renderRoutes, matchRoutes} from 'react-router-config';
let Mainlayout = (props)=>{

    return(<div>
        Mainlayout 
        <Link to="/secondLayout_1">secondLayout_1</Link>
        //addition是传给子路由的额外参数 
        {renderRoutes({props.route.routes},{addition:"xxxx"})}
    </div>);
}
export default Mainlayout ;

renderRoutes每次只渲染路由数组中的一层

每次有子路由时都需要使用，会传当前路由的子路由，按需加载，
不是一次性吧所有路由都渲染出来

import { BrowserRouter } from 'react-router-dom'
import { routesArray } from './routerArray'
import {renderRoutes, matchRoutes} from 'react-router-config';

function root() {
  return (
    <BrowserRouter>
      
      {renderRoutes(routesArray )}
    </BrowserRouter>
  )
}

export default root

import React from 'react'
import ThirdLayout_1 from '../page/ThirdLayout_1'
import ThirdLayout_2 from '../page/ThirdLayout_2'
import {Link, Route} from "react-router-dom";
import {renderRoutes, matchRoutes} from 'react-router-config';
let SecondLayout_1 = (props)=>{

    return(<div>
        SecondLayout_1
        <Link to="/secondLayout_1/ThirdLayout_1">ThirdLayout_1</Link>
        <Link to="/secondLayout_1/ThirdLayout_2">ThirdLayout_2</Link>
        //addition是传给子路由的额外参数 
        {renderRoutes({props.route.routes},{addition:"xxxx"})}
    </div>);
}
export default SecondLayout_1;