小编Min*_*tee的帖子

当我useRouter从 \'next/navigation? 导入时？我收到此错误：

\n

类型“AppRouterInstance”上不存在属性“query”。

\n

import { useRouter } from \'next/navigation\';\n\nconst {\n\xc2\xa0 \xc2\xa0 query: { id },\n back\n} = useRouter();\n

如果我使用旧的“next/router”，我会在浏览器中收到此错误。我怎样才能解决这个问题？

我正在尝试链接到 div id，但收到此错误：Error: Cancel rendering route

这似乎是双重链接的问题。

我已经使用了useRouter[ pushslug]，因为NextLink并且<a>不会导致地图循环中的重新渲染，我用它来渲染与（endsWith）匹配的内容asPath: /posts/post-id/the-slug

  const router = useRouter();
  const { asPath } = useRouter();
  const {
    query: { id },
  } = useRouter();

  const handleHref = (link) => {
    router.push(link);
  };

这有效，链接到也重新渲染地图循环的 slugs。

  <ButtonLink
    onClick={() =>
      handleHref(
        `/posts/${id}/${String(item.slug).replace(/ /g, "-")}`
      )
    }
  >
    Example
  </ButtonLink>

现在，当尝试使用与or/posts/post-id/the-slug#div-id相同的方法链接到 div id 时，我收到错误。useRouterNextLink

  <Link href={`#${String(sect.section).replace(/ /g, "-")}`} passHref>
    <a>
      <Text>Example</Text>
    </a>
  </Link>

  //or

  <ButtonLink
    onClick={() …

我正在关注React-query的文档，其中包含有关使用 Next.js 13 应用程序目录中的 Hydrate 组件进行服务器端渲染的部分。在本节中，指南从 React 导入缓存对象，如下所示：

import { cache } from 'react';

但是，当我尝试在自己的项目中从 React 导入缓存时，收到一条错误消息“在‘react’中找不到缓存”。

有人可以解释一下为什么我会收到此错误以及如何修复它吗？我需要安装单独的包才能在 React 中使用缓存对象吗？

当我渲染下面的代码时，我收到此错误：

语法错误：意外的标记“导出”

（项目路径）/node_modules/react-syntax-highlighter/dist/esm/styles/prism/index.js

它最初按预期工作，直到我刷新页面。

import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { oneLight } from "react-syntax-highlighter/dist/esm/styles/prism";

const codeString = '(num) => num + 1';

const Code = () => {
  return (
    <div>
      <SyntaxHighlighter language="javascript" style={oneLight}>
        {codeString}
      </SyntaxHighlighter>
    </div>
  );
};

export default Code;

我使用 VScode 扩展“ React Typescript Snippets ”，它有一个片段tfcd，提供带有 Typescript 和默认导出的功能组件基础。

import React from 'react';

type indexProps = {
    
};

const Layout:React.FC<indexProps> = () => {
    
    return <div>Have a good coding</div>
}
export default Layout;

我之前在 Next.js 中使用过它，它工作得很好，但我不确定它是否值得改变，React.FC我NextPage已经看到更多的人使用它。

React.FC和之间有什么区别，NextPage哪一个最适合用于 Next.js 项目？