Как динамически создавать подстраницы / подмаршруты в Next JS? - PullRequest
Новая
       88

Как динамически создавать подстраницы / подмаршруты в Next JS?

0 голосов
/ 12 июля 2020

Я хочу создавать подстраницы динамически, например 

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

или что-то вроде этого 

example.com/test/[index1]
example.com/test/[index2]
example.com/test/[index3]

Подстраницы должны создаваться на основе количества индексов. на базовой / родительской странице

Я совершенно не могу придумать способ справиться с чем-то вроде этой Помощь будет очень признательна

1 Ответ

0 голосов
/ 13 июля 2020

Next js имеет маршрутизацию на основе файловой системы. Чтобы создать маршрут Dynami c для приложения, вам просто нужно создать файл js / ts с именем, похожим на [slug].js (где slug будет параметром маршрута для маршрута c) в pages каталог. В этом файле вы можете записать все logi c для data-fetching и экспортировать компонент React в качестве экспорта по умолчанию, который будет использоваться для рендеринга страницы.

Для вашего варианта использования структура каталогов и некоторые псевдокод для страницы может выглядеть примерно так: 

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

In [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), которые могут быть полезны в зависимости от использования случаи. Подробнее о выборке данных и динамическом c маршрутах читайте в следующих js документах.

...