Link组件+as属性

Link 组件用于处理客户端的导航（即不重新加载页面的导航），以提高用户体验。

可以使用 Next.js 中的 Link 组件来导航至各个页面：

import Link from 'next/link';

<Link href="/">
  首页
</Link> 

Link 组件的 href 不但支持字符串，还可以传入 UrlObject，UrlObject 提供了一种更灵活的方式来定义路由，它允许你构建一个对象，该对象包含了路由路径和查询参数。

接口如下：

interface UrlObject {
    auth?: string | null | undefined;
    hash?: string | null | undefined;
    host?: string | null | undefined;
    hostname?: string | null | undefined;
    href?: string | null | undefined;
    pathname?: string | null | undefined;
    protocol?: string | null | undefined;
    search?: string | null | undefined;
    slashes?: boolean | null | undefined;
    port?: string | number | null | undefined;
    query?: string | null | ParsedUrlQueryInput | undefined;
} 

如果 url 很长，参数很多的情况下可以使用这种方法传参。

实例：

import Link from 'next/link';

const MyLink = () => {
  const urlObject = {
    pathname: '/about', // 页面路径
    query: { name: 'John Doe' }, // 查询参数
  };

  return (
    <Link href={urlObject}>
      <a>关于我们</a>
    </Link>
  );
};

在这个例子中，pathname 属性定义了页面的路径，而 query 属性是一个对象，包含了查询字符串的键值对。

完整的 UrlObject 接口

UrlObject 可以包含以下属性：

pathname: 必需的，页面的路径，如 /about。

query: 一个对象，包含了查询参数，如 { name: 'John Doe' }。

hash: 一个字符串，表示 URL 中的哈希部分，如 #section1。

as: 一个对象或字符串，用于定义如何将内部路径（pathname）转换为用户可见的路径，如 { as: '/about-us' }。

使用as属性

as 属性允许你为路由指定一个自定义的路径，这个路径是用户在浏览器地址栏中看到的。这在处理动态路由时特别有用：

const MyDynamicLink = () => {
  const urlObject = {
    pathname: '/user/[username]', // 动态页面路径
    query: { username: 'johndoe' }, // 查询参数
    as: '/user/johndoe', // 自定义的路径
  };

  return (
    <Link href={urlObject}>
      <a>John Doe 的个人资料</a>
    </Link>
  );
};

router.push

在代码中，如果需要触发导航逻辑，可以使用 router.push 方法：

import {useRouter} from 'next/router'

export default function PortfolioDemo() {
    const router = useRouter();

		const myFunc = () => {
	    router.push("[url]");
	  }

    return <>PortfolioDemo</>
} 

404

pages 文件夹下创建特殊文件 404.js，Next.js 将会在返回 404 错误时，自动加载组件。

相当于用户可以自定义 404 页面。