Question

我想像动态创建子页面

Application.OnTime Now + TimeValue("00:01:00"), "mixerMiddle"

或类似的东西

example.com/test/index1
example.com/test/index2
example.com/test/index3
example.com/test/index4
.......

应基于索引数创建子页面。在基本/父页面中

我完全无法找到处理这种情况的方法帮助将不胜感激

Answer 1

Nextjs具有基于文件系统的路由。要为该应用程序创建动态路由，您只需要在[slug].js目录中创建一个名称类似于pages（其中slug是动态路由的路由参数）的js / ts文件。在该文件中，您可以编写data-fetching的所有逻辑，并将React组件作为默认导出导出，该默认组件将用于呈现页面。

对于您的用例，页面的目录结构和一些伪代码可能看起来像这样

// directory structure
- pages/
  - test/
    - [slug].js

在[slug].js 中，下面的示例使用getServerSideProps作为数据获取方法，该方法将用于在客户端请求该页面时获取该页面所需的数据

// data-fetching methods
export const getServerSideProps = async (ctx) => {
   // you have access to the route param slug in the ctx object
   const slug = ctx.params.slug 

   // fetch the data required for the page by a database query or from a remote API

   // return the fetched data as props
   return {
       props: /* fetched-data */
   }

}

// the page component
const SomeDynamicPage = (props) => {

 // props will contain the data that was returned from the data-fetching method-
 // getServerSideProps 

 return (
   <>
     <h1>Some page</h1>
     <div>
        /* some content based on the received props*/
     </div>
   </>
 )
}

export default SomeDynamicPage;

还有其他数据提取方法（getStaticProps，getStaticPaths，getInitialProps），根据不同的使用情况可能有用。在nextjs文档中详细了解data-fetching和dynamic routes。

如何在NextJS中动态创建子页面/子路由？

1 个答案: