Next.js 开发指南 路由篇 | 动态路由、路由组、平行路由和拦截路由

// 引入Next.js的Link组件和文件系统的路由API
import Link from 'next/link';
import { routes } from '@/utils/routes';
 
// 定义一个动态路由的例子
export const dynamicRouteExample = () => {
  return (
    <Link href={routes.dynamicRoute('1234')} replace>
      <a>访问动态路由</a>
    </Link>
  );
};
 
// 定义一个路由组的例子
export const routeGroupExample = () => {
  return (
    <div>
      <Link href={routes.about()} replace>
        <a>关于我们</a>
      </Link>
      <Link href={routes.contact()} replace>
        <a>联系我们</a>
      </Link>
    </div>
  );
};
 
// 定义一个平行路由的例子
export const parallelRouteExample = () => {
  return (
    <div>
      <Link href={routes.home()} replace>
        <a>首页</a>
      </Link>
      <Link href={routes.about()} replace>
        <a>关于我们</a>
      </Link>
    </div>
  );
};
 
// 定义一个拦截路由的例子
export const interceptRouteExample = () => {
  return (
    <Link href={routes.intercept('1234')} replace>
      <a>访问拦截路由</a>
    </Link>
  );
};

在这个例子中，我们定义了四个组件函数，分别展示了如何使用Next.js的<Link>组件和之前定义的路由API来创建动态路由、路由组、平行路由和拦截路由。这些例子可以帮助开发者理解如何在Next.js中处理不同类型的路由。