NextJS:警告:道具目标不匹配。服务器:“ _ top”客户端:“ _ blank”

时间:2020-07-25 12:24:55

标签: reactjs material-ui next.js server-side-rendering

我正在使用此框架构建博客,两天后,我什么都没收到下一个警告(我以前没有得到过):

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 />,
                StackOverflow: <StackOverflow />,
                LinkedIn: <LinkedIn />,
              }[type]
            }
          </ListItemIcon>
      </Link>
    </ListItem>

这是什么问题?

1 个答案:

答案 0 :(得分:0)

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

解决了