react 知识点2

create-react-app react-0701
yarn add react-router-dom --save
yarn add redux react-redux

router

react-router-dom 实现全局路由登陆拦截
https://www.cnblogs.com/kdcg/p/9309600.html

<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
<Route exact path="/music" component={Music} />

// routerMap.js用来存储所有的路由信息，定义需要登陆拦截的页面(auth)
export default [
    {path:'/',name:Home,component:Home},
    {path:'/about',name:About,component:About},
    {path:'/music',name:Music,component:Music}
]

 <Switch>
    {Routers.map((item, index) => {
    return (
        <Route
        key={index}
        path={item.path}
        exact
        // render={props => <item.component {...props} />}
        render={props =>
            !item.auth ? (
                <item.component {...props} />
            ) : token ? (
                <item.component {...props} />
            ) : (
                <Redirect
                to={{
                    pathname: "/login",
                    state: { from: props.location }
                }}
                />
            )
            }
        />
    );
    })}
</Switch>