P06: 如何根据后台接口动态获取路由并进行配置

Posted 2022-01-06 wgchen~

React Router

• 阐述
• 模拟后台得到的JSON数据
• 循环出Link区域
• 循环出路由配置

阐述

通过上节做的小案例，我们对React Router也有了更加清楚的了解。

有时候做一个后台管理系统，菜单并不是写死的，而是通过后台接口获得的，这时候我们要如何根据后台接口编写我们的路由呢。

本文就模拟下后台获取路由配置，并编写动态路由配置的方法。

模拟后台得到的JSON数据

我们现在 AppRouter.js 文件里，模拟从后台得到了JSON字符串，并转换为了对象（我们只是模拟，就不真的去远端请求数据了）。

模拟的代码如下:

let routeConfig =[
    path:'/',title:'博客首页',exact:true,component:Index,
    path:'/frontCourse/',title:'前端教程',exact:false,component:FrontCourse,
    path:'/workplace/',title:'职场技能',exact:false,component:Workplace
]

循环出Link区域

这时候一级导航就不能是写死了，需要根据得到的数据进行循环出来。
直接使用 map 循环就可以。

代码如下：

<ul>
    
        routeConfig.map((item,index)=>
            return (<li key=index> <Link to=item.path>item.title</Link> </li>)
        )
    
</ul>

这时候就可以把所有的Link标签都循环出来了。

循环出路由配置

按照上面的逻辑把Route的配置循环出来。
代码如下:

    routeConfig.map((item,index)=>
        return (<Route key=index exact=item.exact path=item.path component=item.component />)
    )

为了方便你学习，这里给出 AppRouter.js 的全部代码。

ReactRouterDemo\\demo02\\src\\AppRouter.js

import React from "react";
import  BrowserRouter as Router, Route, Link  from "react-router-dom";
import Index from './Pages/Index'
import FrontCourse from './Pages/FrontCourse'
import Workplace from './Pages/Workplace'
import './index.css'

function AppRouter() 
    let routeConfig =[
        path:'/',title:'博客首页',exact:true,component:Index,
        path:'/frontCourse/',title:'前端教程',exact:false,component:FrontCourse,
        path:'/workplace/',title:'职场技能',exact:false,component:Workplace
    ]
    return (
        <Router>
            <div className="mainDiv">
                <div className="leftNav">
                    <h3>一级导航</h3>
                    <ul>
                        
                            routeConfig.map((item, index)=>
                                return (
                                    <li key=index>
                                        <Link to=item.path>item.title</Link>
                                    </li>
                                )
                            )
                        
                    </ul>
                </div>

                <div className="rightMain">
                    
                        routeConfig.map((item,index)=>
                            return (<Route key=index exact=item.exact path=item.path component=item.component />)
                        )
                    
                </div>
            </div>
        </Router>
    );


export default AppRouter;

到这里就可以实现动态显示路由了，并且可以后台进行配置了，但是这应该都是架构层考虑的东西了。如果你刚接触React，可能这种用法的不多。但是你可以利用这模式来设计你静态的路由，增加你程序的扩展性。

到这里你应该可以算是对React-Router入门了，当然React-Router还有很多用法我没有讲到，以后我会再出一个实例，来讲解这部分内容。