Warning: A future version of React will block javascript

Question

I cloned repo from gitlab and installed the dependencies then When I type yarn next dev from command line I get

index.js:1 Warning: A future version of React will block javascript: URLs as a security precaution. Use event handlers instead if you can. If you need to generate unsafe HTML try using dangerouslySetInnerHTML instead. React was passed "javascript:;"

error. And in the browser I get err code 404 on landing page. What is wrong I could not manage to get over.

what repo you cloned because there is an error in the code! – adel Jan 21 '20 at 12:15 — adel, Jan 21 '20 at 12:15

score 26 · Accepted Answer · answered Jan 21 '20 at 12:23

26

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.

answered Jan 21 '20 at 12:23

Maciej B. Nowak

1,180
7
19

1

but # appends in url which i don't want to. – Amit Shah Mar 11 '21 at 11:39
2

you can style a button to look like an tag. – Freddie Ergatoudis Mar 18 '21 at 12:53
3

`` also works! – Nawaz Apr 10 '22 at 21:14
1

@Nawaz you just made me loosing 10 minutes. It does not work, it breaks the whole functionality of the tag. – Simoyw May 17 '23 at 09:04
It seems different versions of ReactJs treat this differentky. There doesn't seem to be any good suggestion that works for all. – Nawaz May 17 '23 at 14:20

score -2 · Answer 2 · answered Mar 24 '21 at 11:39

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>
  )
}

Warning: A future version of React will block javascript

2 Answers2