React使用useLocation监听url地址变化,工具URLSearchParams获取参数

import * as React from ‘react‘
import { Link, useLocation } from ‘react-router-dom‘
export interface BottomNavigationViewProps {
  className?: string
  isLogin?: boolean
  avatar?: string
  userMenuOpen?: boolean
  hasNotification?: boolean
  onUserMenuOpen?: () => void
  onUserMenuClose?: UserMenuProps[‘onUserMenuClose‘]
  onLoginClick?: (event: React.MouseEvent) => void
}
const NAVIGATION_ITEMS = [
  {
    id: ‘home‘,
    icon: ‘home‘,
    href: ‘/‘,
    path: /^\/$/,
    name: ‘首页‘,
  },
  {
    id: ‘discuss‘,
    icon: ‘discuss‘,
    href: ‘/discussion‘,
    path: /^\/discussion/,
    name: ‘讨论‘,
  },
  // {
  //   id: ‘purchased‘,
  //   icon: ‘myShow‘,
  //   href: ‘/purchased‘,
  //   path: /^\/purchased/,
  //   name: ‘我的项目‘,
  // },
]

/**
 * 一个底栏导航组件，仅在移动端展示。某种 Material Design 原教旨主义玩家公敌。
 * @param props 向组件内部传入的参数。
 * @param props.className （可选）为本组件额外追加的 class 名称。
 */
const BottomNavigationView: React.FC = ({
  className,
  isLogin,
  avatar,
  userMenuOpen,
  onUserMenuOpen,
  onUserMenuClose,
  onLoginClick,
  hasNotification,
  ...props
}) => {
  const mainClassName = cn(styles.bottomNavigation, className)
  const location = useLocation()
  const utm = new URLSearchParams(location.search)
  if (utm.get("utm_source")) {
    localStorage.setItem("utm_source",utm.get("utm_source")||"")
  }
  return (
    <>
      
      

        
      
    
  )
}

export default React.memo(BottomNavigationView)