一、react-router-config 是一個協助我們設置靜態路由的小助手。
其源碼就是一個高階函數 應用一個map函數天生靜態路由

import React from "react";
import Switch from "react-router/Switch";
import Route from "react-router/Route";
const renderRoutes = (routes, extraProps = {}, switchProps = {}) =>
routes ? (
    <Switch {...switchProps}>
        {routes.map((route, i) => ( 
        <Route
          key={route.key || i}
          path={route.path}
          exact={route.exact}
          strict={route.strict}
          render={props => (
            <route.component {...props} {...extraProps} route={route} />
          )}
        />
      ))}
    </Switch>
  ) : null;
 export default renderRoutes;

//router.js 假定這是我們設置的路由數組（這類寫法和vue很相似是不是是?)

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

//app.js 那末我們在app.js里這麼運用就能夠幫我天生靜態的路由了

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

export default App

扯了半天，要怎樣應用這個插件幫我們路由鑒權呢？
用過vue的小朋友都曉得，vue的router.js 內里增加 meta: { requiresAuth: true }
然後應用導航守御

router.beforeEach((to, from, next) => {
  // 在每次路由進入之前推斷requiresAuth的值，假如是true的話呢就先推斷是不是已上岸
})

二、基於相似vue的路由鑒權主意，我們稍稍革新一下react-router-config
// utils/renderRoutes.js

import React from 'react'
import { Route, Redirect, Switch } from 'react-router-dom'
const renderRoutes = (routes, authed, authPath = '/login', extraProps = {}, switchProps = {}) => routes ? (
  <Switch {...switchProps}>
    {routes.map((route, i) => (
      <Route
        key={route.key || i}
        path={route.path}
        exact={route.exact}
        strict={route.strict}
        render={(props) => {
          if (!route.requiresAuth || authed || route.path === authPath) {
            return <route.component {...props} {...extraProps} route={route} />
          }
          return <Redirect to={{ pathname: authPath, state: { from: props.location } }} />
        }}
      />
    ))}
  </Switch>
) : null

export default renderRoutes

修正後的源碼增加了兩個參數 authed 、 authPath 和一個屬性 route.requiresAuth
然後再來看一下最癥結的一段代碼

if (!route.requiresAuth || authed || route.path === authPath) {
    return <route.component {...props} {...extraProps} route={route} />
    }
    return <Redirect to={{ pathname: authPath, state: { from: props.location } }} />

很簡單 假如 route.requiresAuth = false 或許 authed = true 或許 route.path === authPath（參數默許值’/login’）則襯着我們頁面，不然就襯着我們設置的authPath頁面，並紀錄從哪一個頁面跳轉。

響應的router.js也要輕微修正一下

const routes = [
    { path: '/',
        exact: true,
        component: Home,
        requiresAuth: false,
    },
    {
        path: '/login',
        component: Login,
        requiresAuth: false,

    },
    {
        path: '/user',
        component: User,
        requiresAuth: true, //須要上岸后才跳轉的頁面

    },
    {
        path: '*',
        component: NotFound,
        requiresAuth: false,
    }
]

//app.js

import React from 'react'
import { Switch } from 'react-router-dom'
//import { renderRoutes } from 'react-router-config'
import renderRoutes from './utils/renderRoutes'
import routes from './router.js'

const authed = false // 假如上岸以後能夠應用redux修正該值(關於redux不在我們這篇文章的議論局限以內）
const authPath = '/login' // 默許未登錄的時刻返回的頁面，能夠自行設置

const App = () => (
   <main>
      <Switch>
         {renderRoutes(routes, authed, authPath)}
      </Switch>
   </main>
)
export default App

//上岸以後返回本來要去的頁面login函數
login(){
    const { from } = this.props.location.state || { from: { pathname: '/' } }
     // authed = true // 這部份邏輯本身寫吧。。。
    this.props.history.push(from.pathname)
}

以上～修正了部份源碼並完成了我們想要的結果。