没有字符串的nextjs链接答案

【问题标题】：nextjs links without strings没有字符串的nextjs链接
【发布时间】：2023-01-30 15:00:07
【问题描述】：

我是 nextjs 的新手，我正在检查它是否适合具有非常复杂和混乱的内部导航的应用程序。刚刚查看了他们的文档，我看到他们推荐使用 Link 组件像这样 <Link href="/your_path">Path</Link>。有点可怕的是，我必须以字符串形式提供“your_path”，因此每次更改页面文件名时，我都必须手动更新重定向到该页面的代码。有没有什么解决方案可以让我自己定义路由，这样我就可以写出类似（伪代码）的东西

routes = [
...
{
   page : 'page_name', 
   path : 'path_to_page'
}
...
]

因此，我可以使用 <Link href="{route.path}">Path</Link> 而不是使用字符串，或者我被谴责使用这个基于文件系统的路由器并承担所有后果？

【问题讨论】：

接下来使用基于文件的路由...您也可以指定动态路由。 nextjs.org/docs/routing/introduction

标签： next.js next-router

【解决方案1】：

有几种方法可以处理它，使代码更干，更易于编辑

一种方法是像这样：

//routes.js
export const homeRoute = {
  path : '/home'
};

export const aboutRoute = {
  path : '/about'
}

在 jsx 中：

 <Link href="{homeRoute.path}">Path</Link>

如果你想获得所有路由（如果你需要循环通过它）你可以通过这种方式导入它：

import * as routes from "./routes"

它会返回键和值对象，所以你可以得到它的值数组

像这样：

Object.values(routes)
// result would be : [
{
  path : '/home'
},
{
      path : '/about'
}
]

【讨论】：