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>
网友评论