score:18

Accepted answer

It seems that somewhere in this code you have an element with an explicit javascript code somewhere in it's attributes. Something along the lines of

<a href="javascript:;" ...>...</a>

as the warning mentions: React was passed "javascript:;". This is probably some old repo, that was using this to get away with <a> tags that do not lead anywhere. The more common solution to this is usig href='#'.

However, the 404 you are getting is probably signifying something more and the repo itself is probably broken.

score:0

You can define a component based on a element. The followings are a bunch of code snippets.

import React, { FC, MouseEvent } from 'react'
import classnames from 'classnames'

import './navigator.scss'

export interface INavigatorProps {
  className?: string
  prefixCls?: string
  style?: React.CSSProperties

  url: string

  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void
}

export const Navigator: FC<INavigatorProps> = ({
  style,
  children,
  url: oldUrl,
  className = '',
  onClick: oldOnClick,
  prefixCls = 'pa-navigator',
}) => {
  const classNameString = classnames(className, prefixCls)

  let [url = oldUrl, onClick = oldOnClick] = []
  if (/^javascript:/.test(url) || url === '#') {
    // @ts-ignore
    url = undefined

    onClick = (event) => {
      event.stopPropagation()

      oldOnClick?.call(Object.create(null), event)
    }
  }

  return (
    <a
      href={url}
      style={style}
      className={classNameString}
      onClick={onClick}
      rel='noopener noreferrer'
    >
      {children}
    </a>
  )
}


Related Query

More Query from same tag