React的高阶组件

高阶组件：组件被当做参数传递到另一个组件中进行使用，返回一个新组件。
自定义一个组件，把登陆判断做一个封装
在引入组件的地方，把自定义组件引入

import NeedLogin from './components/NeedLogin'

需要登陆判断的route组件采用自定义组件

<Content> 
    <Route exact path='/' component={Home} /> 
    <Route path='/list' component={List} /> 
    <Route path='/about' component={About} /> 
    <Route path='/detail/:id' component={Detail} /> 
    <NeedLoginCtrl path='/user' component={User} /> 
</Content>

自定义组件

import React from 'react'
import { Route, Redirect } from 'react-router-dom'
import { isLogin } from '../utils/auth'

export default function PrivateRoute ({ component: Component, ...rest }) {
// 结构赋值时 表示把接收到的参数component属性值赋值给变量Component，其他的属性放在后面的对象中
  return (
    <Route
      {...rest}
      render={props =>
        isLogin() ? (
          <Component {...props} />
        ) : (
            <Redirect
              to={{
                pathname: '/about',
                state: { from: props.location },
              }}
            />
          )
      }
    />
  );
}

render表示路由对应的组件的渲染方法,三元表达式
没登陆时，使用Redirect实现重定向