用TS封装Icon SVG模块和路由拦截模块

 //Inco SVG图标模块
import classNames from "classnames"
interface Props {
  type: string,
  className?: string,
  onClick?: () => void,
}
export const Icon: React.FC<Props> = ({ type, className,onClick }) => {
  return (
    <svg className={classNames("icon", className)} aria-hidden="true" onClick={onClick}>
      {/* 使用时，只需要将此处的 iconbtn_like_sel 替换为 icon 的名称即可*/}
      <use xlinkHref={`#${type}`}></use>
    </svg>
  )
}


//路由鉴权模块
import { RootStore } from "@/types/store"
import { isAuth } from "@/utils"
import { useSelector } from "react-redux"
import { Navigate, useLocation } from "react-router-dom"

export type PropType = {
  children: React.ReactElement

}
const AuthRoute: React.FC<PropType> = ({ children }) => {
  const token = useSelector<RootStore>((state) => state.login.token)
  const location = useLocation()
  if (token && isAuth()) {
    return children
  } else {
    return <Navigate to={'/login'} state={{ from: location.pathname }} />
  }
}

export default AuthRoute