使用 nextjs 的路由和 link 问题

Question

我在 Nextjs 中遇到路由和 links 问题。我已经使用 React+Typescript 创建了一个类似博客的页面，我想在 Nextjs 中使用相同的代码。我最初使用 import {Link} from 'react-router-dom'; 。但是由于此 link 不适用于 Nextjs，我使用了 link/next 导入。

问题是，当我尝试单击导航栏的 "Aboutus" 时，出现以下错误：

404 This page could not be found.

这是我的 Navbar.tsx

的代码

import React from 'react';
import Link from 'next/link';
const Navbarr : React.FC = () => {
return (
<div>
<AppName >
        <Link href="/"><a>Abc</a></Link>
    </AppName>
    <Button>
        <Link href="/new">
          <a>Aboutus</a>
        </Link>
    </Button>
</div>)}
export default NavBarr;

Answer 1

在 Next.js 中，当文件添加到 pages 目录时，它会自动用作路由。

我建议你阅读https://nextjs.org/docs/routing/introduction

使用 nextjs 的路由和 link 问题

Issue with routing and link using nextjs

typescript

reactjs

react-router

next.js