警告：React 的未来版本将阻止 javascript

Question

我从 gitlab 克隆了 repo 并安装了依赖项然后当我从命令行键入 yarn next dev 我得到

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:;"

错误。在浏览器中，我在登录页面上收到错误 code 404。怎么了我怎么也过不去。

Answer 1

似乎在此代码中的某处有一个元素，其属性中某处带有显式 javascript 代码。类似于

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

如警告所述：React was passed "javascript:;"。这可能是一些旧的回购协议，它使用 this 来摆脱不指向任何地方的 <a> 标签。更常见的解决方案是使用 href='#'.

但是，您得到的 404 可能意味着更多的东西，并且回购协议本身可能已损坏。

Answer 2

您可以根据 a 元素定义组件。以下是一堆代码片段。

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

警告：React 的未来版本将阻止 javascript

Warning: A future version of React will block javascript

reactjs

redux

next.js