0
点赞
收藏
分享

微信扫一扫

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


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;

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


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

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


举报

相关推荐

odoo12—开发手册>>P06

0 条评论