javascript nextjs13app目录如何为主页指定路由文件夹

v6ylcynt  于 2023-05-05  发布在  Java
关注(0)|答案(3)|浏览(277)

在Nextjs的实验应用目录中,我想为整个应用指定一个布局,错误,加载,...等等,然后为主页指定一个布局,错误,加载,...等等,这是主页所独有的。这可以很容易地完成与应用程序中的每一个其他页面,只需创建一个文件夹,然后将这些文件放在它。但是我似乎不知道如何为主页指定一个文件夹。主页的所有内容都位于应用程序目录的根目录,该目录由整个应用程序以及主页使用。看起来你应该只需要指定一个索引目录,并像对待应用程序中的任何其他页面一样对待它,但事实并非如此。我似乎找不到任何关于如何处理这件事的文件。这只是Next13的一个功能。如果是这样的话,你可以为应用程序中的每个页面指定特定的页面,布局,错误等,但不能为主页指定路径,这似乎有点奇怪。
那么,如何在Nextjs 13中使用应用程序目录文件结构为主页指定目录呢?

km0tfn4u

km0tfn4u1#

查看Nextjs路由组Nextjs路由组。您可以为您的家庭特定的东西创建一个路由组。路由组的定义方法是创建一个用圆括号括起来的目录。所以你可以创建一个名为(home)的目录并将page.js移到那里,然后你可以在该目录中创建另一个layout.js。就像这样:

/app
  layout.js
  /(home)
    page.js
    layout.js
  /about
    page.js
    layout.js
    ...ect

所以Nextjs会首先检查app目录的根目录,并加载在那里找到的layout.js。然后,它将作为根目录的子目录转到(home)目录,以加载您的页面和主页布局。

6pp0gazn

6pp0gazn2#

我们的想法是在/app目录中有布局(只有html和body标签)和错误页面(服务于/ index页面),以及路由组中的其他所有内容。

- /app
    layout.tsx //this should be a plain root layout
    page.tsx 
  - (others)  // note the ( ) as this is a routing group
      layout.tsx
    - /about
        page.tsx
    - /post
        page.tsx

对于你的主页,你应该使用layout.tsx为你的其他元素,而不仅仅是html和body标签,你可以把你的布局放在page.tsx中(或作为组件导入)。
重定向法
或者简单地将主页重定向到特定的文件夹

// you can also do it in middleware once its available
export default async function Home({ params }) {
    redirect('/home');
    return
}

请记住/app目录仍处于测试阶段,因此许多问题仍在解决中。请求或错误报告应发送到其存储库。

brqmpdu1

brqmpdu13#

您可以在_app页面中使用getInitialProps函数将所有输入重定向到特定页面,以实现您想要的功能:

MyApp.getInitialProps = async ({ctx}) => {
  // if the request is for the / , redirect to /home
  if (ctx.req.url === '/') {
    ctx.res.writeHead(302, { Location: '/home' });
    ctx.res.end();
  }

  return {};
};

相关问题