React路由守卫

路由守卫其实就是我们的路由拦截，当我们有⼀些⻚⾯需要登录之后才有权限去访问这个时候我们的路由守卫就可以派上⽤场了
React⾥的路由守卫其实也是⼀个组件，最后返回的还是Route组件

实例：当没有登录时，“我的”压面不可见，显示登陆页面，只有点击登陆按钮后，才能跳转到“我的”页面

import React, {
    Component } from 'react'
import {
    BrowserRouter, Link, Route, Switch, Redirect } from 'react-router-dom'
import {
    Button } from 'antd'

function App() {
   
  return (
    <div>
      <ul>
        <li>
          <Link to="/">首页</Link>
        </li>
        <li>
          <Link to="/cart">购物车</Link>
        </li>
        <li>
          <Link to="/mine">我的</Link>
        </li>
      </ul>
      {
   /* Switch 只匹配一个路由 */}
      <Switch>
        {
   /* exact是确切匹配 */}
        <Route exact path="/" component={
   Home}></Route>
        <Route path="/cart" component={
   Cart}></Route>
        {
   /* <Route path="/mine" component={Mine}></Route> */}
        <RouteGuard path="/mine" component={
   Mine}></RouteGuard>
        <Route path="/login" component={
   Login}></Route