Next.js如何集中管理路由链接？避免路径变更全局修改

1. 全局路由常量管理法 #

在项目里新建一个专门的路由配置文件（比如src/utils/routes.ts），把所有路由路径统一定义成常量：

// src/utils/routes.ts
export const ROUTES = {
  首页: '/',
  文章页: '/Article',
  关于页: '/about',
  文章详情: (articleId: string) => `/Article/${articleId}`
};

之后在任何需要使用链接的组件里，直接导入这个常量对象：

import Link from 'next/link';
import { ROUTES } from '@/utils/routes';

export default function Navbar() {
  return (
    <nav>
      <Link href={ROUTES.首页}>首页</Link>
      <Link href={ROUTES.文章页}>文章列表</Link>
      <Link href={ROUTES.文章详情('1001')}>第一篇文章</Link>
    </nav>
  );
}

后续如果路由路径需要变更，只需要修改routes.ts里对应的常量值，不用在整个项目中逐个替换链接。

2. 解决/Article路径404的问题 #

出现这个问题是因为Next.js的文件路由规则，分两种场景处理：

如果你用的是App Router（Next.js 13+） #

路由文件夹下的页面文件必须命名为page.tsx，才会对应文件夹名称的路径。比如app/Article/page.tsx对应路径/Article，而如果你的页面文件是app/Article/Article.tsx，就只能通过/Article/Article访问。

解决办法二选一：

• 直接把Article.tsx重命名为page.tsx；
• 在app/Article下新建page.tsx，导入并渲染原Article组件：

  // app/Article/page.tsx
  import Article from './Article';
  
  export default function ArticlePage() {
    return <Article />;
  }
  

如果你用的是Pages Router #

页面文件直接放在pages文件夹下即可，比如pages/Article.tsx对应路径/Article。如果之前是放在pages/Article/Article.tsx，就会对应/Article/Article，把文件移到pages根目录就能解决。

内容的提问来源于stack exchange，提问作者BehzadRG1