P06: 如何根据后台接口动态获取路由并进行配置
目录
通过上节做的小案例,我们对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
的全部代码。
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,可能这种用法的不多。但是你可以利用这模式来设计你静态的路由,增加你程序的扩展性。希望你这节课能 get 到这个技能,也能在工作中尽量使用这种模式。
到这里你应该可以算是对React-Router
入门了,当然 React-Router 还有很多用法我没有讲到,以后我会再出一个实例,来讲解这部分内容,希望你能持续关注博客(mybj123.com)。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P06: 如何根据后台接口动态获取路由并进行配置
码云笔记 » P06: 如何根据后台接口动态获取路由并进行配置