时间戳

首页 > 解决方案 > 带有 Typescript 的 NextJs 中的标签未显示任何 PostLink，如教程所示

typescript - 带有 Typescript 的 NextJs 中的标签未显示任何 PostLink，如教程所示

问题描述

/ 标签不工作。与教程不同，编译后没有显示任何内容。

我正在关注 Nextjs.org 上的教程，并且我还使用了带有 create-next-app typescript 的 typescript 版本。在与一堆类型斗争之后，我终于能够编译但是看到一个空白组件。当我查看控制台时，它显示 index.js:1 警告：'url' 属性已弃用。https://err.sh/zeit/next.js/url-deprecated

我点击了链接，我按照说明下载了codemod，什么也没发生，有人知道我现在应该做什么吗？非常感谢！

import * as React from "react";
import Layout from '../components/MyLayout'
import Link from "next/link";
import {withRouter} from 'next/router'

interface IPostLinkProps{
  title:string
}

const PostLink = (props:IPostLinkProps) =>{
 return( 
    <li>
    <Link href={`/post?title=${props.title}`}>
      <a>{props.title}</a>
    </Link>
  </li>
 )
}

export default withRouter(function Blog(){
    return(
      <Layout>
        <h1> My Blog</h1>
          <ul>
              <PostLink title='hi'/>
              <PostLink title="HELP!"/>
              <PostLink title='hi'/>
          </ul>
      </Layout>
  )
})

index.js:1 警告：'url' 属性已弃用。https://err.sh/zeit/next.js/url-deprecated

标签： typescriptnext.js

解决方案

尝试这个：

interface IProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
    label: string
}

export default function Link({children, href, label, ...rest}: IProps) {
    return <NextLink passHref {...{href}}>
        <a {...rest}>{label ?? children}</a>
    </NextLink>
}

然后这样称呼它：

<Link href='/' label='Home'/>

或者

<Link href='/'>
  <span>Home</span>
</Link>

推荐阅读