react-router攔截與配置

import React, { Component } from 'react';
import { Route, Switch, Redirect  } from 'react-router-dom';
import Test1 from '../view/Test1';
import Test3 from '../view/Test3';
const routes = [
    {
        path: "/",
        exact: true,
        name: "test1",
        component: Test1,
        meta: {
            auth: 0
        }
    },
    {
        path: "/test3",
        exact: true,
        name: "test3",
        component: Test3,
        meta: {
            auth: 0
        }
    }
]
class IndexRouters extends Component {
    componentWillMount() {}
    render() {
        return (
            <Switch>
                {
                    routes.map((item, index) => {
                        return (
                            <Route
                                key={index}
                                path={item.path}
                                exact={item.exact}
                                render={
                                    props => {
                                        if (item.meta.auth === 0) {
                                            return <item.component {...props} route={item} />
                                        } else {
                                            return <Redirect to={{ pathname: "/login", state: { from: props.location } }} />
                                        }
                                    }
                                }
                            >
                            </Route>
                        )
                    })
                }
            </Switch>
        )
    }
}

export default IndexRouters

一般通過配置動態路由以及加上路由組件的聲明週期加以校驗。