React+TS封装鉴权组件,及出现render函数报类型错误

分析 AuthRoute 鉴权路由组件

1. 场景：限制某个页面只能在登录的情况下访问。
2. 说明：在 React 路由中并没有直接提供该组件，需要手动封装，来实现登录访问控制（类似于 Vue 路由的导航守卫）。
3. 如何封装？参考 react-router-dom 文档中提供的鉴权示例 。
4. 如何使用？使用 AuthRoute 组件代替默认的 Route 组件，来配置路由规则。
5. AuthRoute 组件实际上就是对原来的 Route 组件做了一次包装，来实现了一些额外的功能。
6. <Route path component render> render 方法，指定该路由要渲染的组件内容（类似于 component 属性）。
7. Redirect 组件：重定向组件，通过 to 属性，指定要跳转到的路由信息。
8. state 属性：表示给路由附加一些额外信息，此处，用于指定登录成功后要进入的页面地址。

代码实现：

import { Redirect, Route, RouteProps, useLocation } from 'react-router-dom'
import { isAuth } from './token'
import { useDispatch } from 'react-redux'
import { logout } from '@/store/actions'
import { ReactNode } from 'react'
export const AuthRoute = ({ children, ...rest }: RouteProps) => {
  const dispatch = useDispatch()
  const location = useLocation()

  return (
    <Route
      {...rest}
      render={() => {
        const isLogin = isAuth()
        if (isLogin) {
          return children as ReactNode
        }
        dispatch<any>(logout())
        return (
          <Redirect
            to={{
              pathname: '/login',
              state: {
                from: location.pathname,
              },
            }}
          ></Redirect>
        )
      }}
    ></Route>
  )
}

出现的问题：

 解决方案：

         return children as ReactNode