使用react-router0-config时的简易守卫

import React from ‘react’
import { renderRoutes } from ‘react-router-config’
import { withRouter, Link } from ‘react-router-dom’

import { Home, Login, Forms, List, Main } from ‘./components’

const Root = ({ route }) => (

{renderRoutes(route.routes)}
);

class Router extends React.Component {
componentWillMount() {
const { location } = this.props
if(!sessionStorage.getItem(‘token’)&&location.pathname!’/login’){
this.props.history.push(’/login’)
}
}
componentWillReceiveProps(nextProps) {
if(!sessionStorage.getItem(‘token’)&&nextProps.location.pathname!
’/login’){
this.props.history.push(’/login’)
}
}
routes = [
{
component: Root,
routes: [
{
path: “/login”,
component: Login,
},
{
path: “/home”,
component: Home,
routes: [
{
path: “/home/edits”,
component: Forms,
},
{
path: “/home/forms”,
component: Forms,
},
{
path: “/home/list”,
component: List,
},
]
},
{
path: “/”,
component: Main,
}
]
}
];
render() {
return (
<>


<span style={{ display: ‘inline-block’, margin: ‘0 5px’ }}>login
<span style={{ display: ‘inline-block’, margin: ‘0 5px’ }}>home
<span style={{ display: ‘inline-block’, margin: ‘0 5px’ }}>main

{renderRoutes(this.routes)}
</>
)
}
}
export default withRouter(Router)

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值