NextJS：警告：道具目标不匹配。服务器：“_top” 客户端：“_blank”

Question

我正在使用这个框架构建一个博客，两天后我从无到有收到了下一个警告（我之前没有收到）：

react_devtools_backend.js:2273 Warning: Prop `target` did not match. Server: "_top" Client: "_blank"
    in a (at url.js:16)
    in Link (at url.js:15)
    in li (created by ForwardRef(ListItem))
    in ForwardRef(ListItem) (created by WithStyles(ForwardRef(ListItem)))
    in WithStyles(ForwardRef(ListItem)) (at url.js:14)
    in URL (at footer.js:77)
    in ul (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at footer.js:74)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at footer.js:73)
    in footer (created by ForwardRef(Container))
    in ForwardRef(Container) (created by WithStyles(ForwardRef(Container)))
    in WithStyles(ForwardRef(Container)) (at footer.js:72)
    in Footer (at _app.js:46)
    in ThemeProvider (at _app.js:42)
    in FolioApp (created by withI18nextSSR(FolioApp))
    in withI18nextSSR(FolioApp) (created by AppWithTranslation)
    in NextStaticProvider (created by withI18nextTranslation(NextStaticProvider))
    in withI18nextTranslation(NextStaticProvider) (created by AppWithTranslation)
    in I18nextProvider (created by AppWithTranslation)
    in AppWithTranslation (created by withRouter(AppWithTranslation))
    in withRouter(AppWithTranslation)
    in ErrorBoundary (created by ReactDevOverlay)
    in ReactDevOverlay (created by Container)
    in Container (created by AppContainer)
    in AppContainer
    in Root

组件是：

import { Link, ListItemIcon, ListItem } from "@material-ui/core"

---

    <ListItem className={classes.inlineBlock}>
      <Link href={"//" + url} target="_blank" rel="noreferrer">
          <ListItemIcon style={{ minWidth: minimize ? "inherit" : "" }}>
            {
              {
                Home: <Home />,
                Github: <GitHub />,
                BitBucket: <BitBucket />,
                GitLab: <GitLab />,
                Whosebug: <Whosebug />,
                LinkedIn: <LinkedIn />,
              }[type]
            }
          </ListItemIcon>
      </Link>
    </ListItem>

这里有什么问题？

Answer 1

通过更新 NextJS 并遵循 Material UI's example.

解决

NextJS：警告：道具目标不匹配。服务器：“_top” 客户端：“_blank”

NextJS: Warning: Prop target did not match. Server: "_top" Client: "_blank"

reactjs

material-ui

server-side-rendering

next.js