ReactRouter学习之旅五：后台动态获取路由进行配置

假设路由不是写死的，而是通过从后台获取的数据来动态改变，例如权限不同的人看到的页面是不一样的。那么这个时候应该怎么样去配置路由呢？

这里我们通过一个数组来模拟从后台获取的数据，进行一个简单的路由配置。

修改AppRouter.js文件：

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

function AppRouter(){
    //模拟从后端获取的数据
    let routeConfig = [
        {path:'/',title:'博客首页',exact:true,component:Index},
        {path:'/video',title:'视频教程',exact:false,component:Video},
        {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+item}>
                                        <Link to={item.path}>{item.title}</Link>
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>
                <div className="rightMain">
                    {
                        routeConfig.map((item,index)=>{
                            return(
                                <Route key={index+item} path={item.path} exact={item.exact} component={item.component}/>
                            )
                        })
                    }
                </div>
            </div>
        </Router>
    )
}

export default AppRouter;

成功实现和ReactRouter学习之旅四：嵌套路由中同样的效果。