react-router-config 插件使用和分析

学习react全家桶的时候肯定会使用react-router4.0

react-router和vue-router对比起来，感觉vue-router设计的真的是简单好用啊。

但是react可以通过一款react-router-config插件做到和vue-router一样的使用感

npm 仓库：https://www.npmjs.com/package/react-router-config

react-router-config的源码

import React from "react";
import Switch from "react-router/Switch";
import Route from "react-router/Route";
const renderRoutes = (routes, extraProps = {}, switchProps = {}) =>
routes ? (
    
        {routes.map((route, i) => ( 
         (
            
          )}
        />
      ))}
    
  ) : null;
 export default renderRoutes;

route.js

const routes = [
    { path: '/',
        exact: true,
        component: Home,
    },
    {
        path: '/login',
        component: Login,
    },
    {
        path: '/user',
        component: User,
    },
    {
        path: '*',
        component: NotFound
    }
]

app.js 生成静态路由

import { renderRoutes } from 'react-router-config'
import routes from './router.js'
const App = () => (
   

      
         {renderRoutes(routes)}
      
   
)

export default App

简单用法就是这样

扩展文章：

1.react-router配置鉴权：https://segmentfault.com/a/1190000015282620