Далее JS - Dynami c Маршрутизация с несколькими выборками на 1 странице - PullRequest
Новая
       31

Далее JS - Dynami c Маршрутизация с несколькими выборками на 1 странице

1 голос
/ 02 февраля 2020

Я пытаюсь перестроить свой сайт CRA с помощью Next JS, и я немного застрял на этой странице :

Средний контейнер состоит из 3 частей:

  • Список букв (без проблем)
  • Список index (только 1 выборка для получения списка)
  • Описание выбранного индекса (этот изменяются каждый раз, когда пользователь выбирает новый индекс в списке)

Он отлично работает с CRA. Итак, с помощью Next JS я сделал следующее: список index имеет для каждого элемента индекса компонент ссылки, например: "https://www.phidbac.fr/Liste-des-index/50",

и файл [id]. js в страницах / папка Liste-des-index:

// извлечение списка и описания при каждом новом выборе 

const Indexes = ({ listeIndex, cours, id }) => {
  return (
    <>      
      <Layout>
        <PageIndex listeIndex={listeIndex} id={id} cours={cours} />
      </Layout>
    </>
  );
};

export default Indexes;

Indexes.getInitialProps = async ({ req }) => {

// Get the correct ID Description from URL
  let id = req.url;
  id = id.split("/")[2];

  const res = await fetch("https://www.phidbac.fr:4000/Indexes");
  const dataList = await res.json();
  const res1 = await fetch(`https://www.phidbac.fr:4000/Indexes/${id}`);
  const dataDescription = await res1.json();

  return {
    listeIndex: dataList,
    cours: dataDescription,
    id: id
  };
};

Это работает, но эта страница выполняет полную перезагрузку при каждом нажатии, поэтому это медленное и явно не хорошее решение.

Github Repository

Как мне добиться что-то такое же гладкое, как в версии CRA?

Спасибо за помощь: D

РЕДАКТИРОВАТЬ:

На этом снимке экрана вы видите задержку между щелчком и загрузкой страницы и контейнер прокрутки возвращается в начало.

Example

Я просто пытаюсь не обновлять sh список индексов при каждом нажатии и просто измените описание с правой стороны.

Я отредактировал git с вашим решением, если вы хотите попробовать.

Еще раз спасибо:)

1 Ответ

0 голосов
/ 02 февраля 2020

Соглашение об именах, которое вы используете для своей страницы [id-name].js, является частью Dynami c маршрутов функции Next. js. Немного изменив свой код, используя next/link для Dynami c маршруты , я думаю, что мне удалось добиться того, что вы просили.

enter image description here

Сначала вам нужно изменить ListeIndex.tsx и использовать компонент Link из next/link с реквизитами href и as (подробнее об этом по приведенной выше ссылке и комментариям ниже) 

// ListeIndex.tsx

import Link from 'next/link'
// const { Link } = routes;

...

<Link
  key={element.id}
  prefetch={false}
  href="/Liste-des-index/[id-name]" // `href` points to page [id-name].js
  as={`/Liste-des-index/${element.id}-${element.nom // `as` holds the data you need to pass
    .replace(/\u202f/g, "-") 
    .replace(/\//g, "-")}`}> 

...

Затем вам просто нужно изменить [id-name].tsx и ожидать, что ваши данные будут под query вместо req

// [id-name].tsx

...

Indexes.getInitialProps = async ({ query }: any) => {
  const id = query['id-name'].split("-")[0]; // you should find your data under `query` parameter

...
...