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.
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.
<a href={undefined} ... > also works!
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>
)
}
