NextJS 路由错误，换页时，试图打开错误的文件

Posted 2023-03-30

【中文标题】NextJS 路由错误，换页时，试图打开错误的文件

【英文标题】：NextJS routing error, when changing pages, the wrong file is trying to open

【发布时间】：2021-09-05 18:44:16

【问题描述】：

我想要什么

我想更改页面而不考虑我正在尝试打开另一个页面。

问题

我遇到了这个奇怪的路由问题。 一、我的文件夹结构

pages
  [app]
    [object]
      index.js
    index.js
    manager.js
    feed.js

我在这条路径/[app] 并导航到/[app]/manager，然后我想导航到/[app]/feed，我得到了这个未处理的运行时错误。

TypeError: Cannot read property "title" of undefined

此错误来自[object] index.js。堆栈跟踪如下。当然，它无法读取标题是有道理的，因为我正在尝试打开另一个页面。然而它认为我正在尝试打开[object]。 这个错误不时发生，但我尝试打开页面的顺序无关紧要，它可以是经理提供或提供给经理，或者我那里有什么其他东西。 我的getStaticPaths 和getStaticProps 在所有这些页面上都是相同的，我将分享manager.js 的一个。

export const getStaticPaths = async () => 
  const paths = appRoutes.map((appRoute) => 
    const slug = appRoute.slug;

    return 
      params: 
        app: slug,
        manager: 'manager',
      ,
    ;
  );

  return 
    fallback: false,
    paths,
  ;
;

export const getStaticProps = async ( locale ) => 
  return 
    props: 
      ...(await serverSideTranslations(locale, ['manager', 'common'])),
    ,
  ;
;

同样如此，但[object]：

export const getStaticPaths = async () => 
  const allObjects = await loadObjectData( id: 'all' );
  const paths = allObjects.flatMap((object) => 
    return appRoutes.map((appRoute) => 
      return 
        params: 
          object: object.type,
          app: appRoute.slug,
        ,
      ;
    );
  );

  return 
    fallback: false,
    paths,
  ;
;

export const getStaticProps = async ( params, locale ) => 
  const object = await loadObjectData( type: params.object );
  const app = appRoutes.find((appRoute) => appRoute?.slug === params.app);

  if (!object) 
    throw new Error(
      `$object is not a valid Object. Try checking out your parameters: $params.object`
    );
  

  if (!app) 
    throw new Error(`$app is not a valid App.`);
  

  return 
    props: 
      ...(await serverSideTranslation(locale, ['common'])),
      object,
      app,
    ,
  ;
;

这个错误很难重现，因为它只是偶尔发生。

---

新编辑

这是[object]/index.js的完整文件

import appRoutes from '../../../routes/appRoutes';
import loadObjectData from '../../../utils/loadObjects';
import  serverSideTranslation  from 'next-i18next/serverSideTranslations';

export default function ObjectPage( object ) 
  return <h1> object.title </h1>;


export const getStaticPaths = async () => 
  const allObjects = await loadObjectData( id: 'all' );
  const paths = allObjects.flatMap((object) => 
    return appRoutes.map((appRoute) => 
      return 
        params: 
          object: object.type,
          app: appRoute.slug,
        ,
      ;
    );
  );

  return 
    fallback: false,
    paths,
  ;
;

export const getStaticProps = async ( params, locale ) => 
  const object = await loadObjectData( type: params.object );
  const app = appRoutes.find((appRoute) => appRoute?.slug === params.app);

  if (!object) 
    throw new Error(
      `$object is not a valid Object. Try checking out your parameters: $params.object`
    );
  

  if (!app) 
    throw new Error(`$app is not a valid App.`);
  

  return 
    props: 
      ...(await serverSideTranslation(locale, ['common'])),
      object,
      app,
    ,
  ;
;

堆栈跟踪：

ObjectPage: index.js:6 Uncaught TypeError: Cannot read property 'title' of undefined

at ObjectPage (http://localhost:3000/_next/static/chunks/pages/%5Bapp%5D/%5Bobject%5D.js:3733:21)
at div
at Grid (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1624290251377:13654:35)
at WithStyles (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1624290251377:179881:31)
at div
at StyledComponent (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1624290251377:179652:28)
at div
at ProjectSelectionStore (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1624290251377:234820:77)
at Layout (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1624290251377:278:23)
at TaskStore (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1624290251377:235454:77)
at UserDocumentStore (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1624290251377:235663:77)
at StoneStore (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1624290251377:235119:77)
at StoreMall (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1624290251377:409:23)
at ThemeProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1624290251377:178584:24)
at App (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1624290251377:234333:24)
at I18nextProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1624290251377:224427:19)
at AppWithTranslation
at ErrorBoundary (http://localhost:3000/_next/static/chunks/main.js?ts=1624290251377:146:47)
at ReactDevOverlay (http://localhost:3000/_next/static/chunks/main.js?ts=1624290251377:250:23)
at Container (http://localhost:3000/_next/static/chunks/main.js?ts=1624290251377:8662:5)
at AppContainer (http://localhost:3000/_next/static/chunks/main.js?ts=1624290251377:9151:24)
at Root (http://localhost:3000/_next/static/chunks/main.js?ts=1624290251377:9282:24)

---

25.06.2021

所以我从ObjectPage 和每个NavigationItem 控制台登录路由器。我注意到了一些奇怪的事情。 这是我传递给<Link>的href：

  pathname: "/[app]/[menuItem]"
  query: 
    app: "content"
    menuItem: "files"
  

这就是我要回到ObjectPage 的完整路由器。

asPath: "/content/editor" // this the path i want to open
back: ƒ ()
basePath: ""
beforePopState: ƒ ()
components: 
  "/[app]/[object]": styleSheets: Array(0), __N_SSG: true, __N_SSP: undefined, props: …, Component: ƒ
  "/[app]/editor": initial: true, props: …, err: undefined, __N_SSG: true, Component: ƒ, …
  "/_app": styleSheets: Array(0), Component: ƒ

defaultLocale: "de"
events: on: ƒ, off: ƒ, emit: ƒ
isFallback: false
isLocaleDomain: false
isPreview: false
isReady: true
locale: "de"
locales: ["de"]
pathname: "/[app]/[object]" // [object] is being loaded
prefetch: ƒ ()
push: ƒ ()
query: app: "content", menuItem: "editor", object: "editor" // this is interesting
reload: ƒ ()
replace: ƒ ()
route: "/[app]/[object]" // same as pathname

在query 中可以看到object 被注入。但我不知道从哪里以及为什么。

【问题讨论】：

title 道具从何而来？您能否向我们展示与此相关的代码（错误的实际来源）？

@juliomalves 我将道具object 传递给页面，然后传递object.title。我将在顶部添加代码。

那么您在manager 或feed 页面中没有对title 的引用？

@juliomalves 不，错误消息特别提到它来自[object]/index.js：ObjectPage: index.js:6 Uncaught TypeError: Cannot read property 'title' of undefined。我将添加 Stacktrace

嘿，@juliomalves 我相信我已经解决了。看看我是如何获得参数[menuItem] 的？这是错误的，因为我没有以这种方式命名的动态文件夹或文件。相反，我将其写为pathname: "/[app]/files"，与您的建议非常相似。

【参考方案1】：

我有这个代码：

  pathname: "/[app]/[menuItem]"
  query: 
    app: "content"
    menuItem: "files"
  

这是不正确的，因为没有到 [menuItem] 的动态路径。所以我写了：

  pathname: "/[app]/files"
  query: 
    app: "content"
  

这解决了我遇到的问题。

我误解了文档中的参数。