Как React / NextJS может обрабатывать маршрутизацию и образы, если путь не содержит подсказок о типе данных? - PullRequest
0 голосов
/ 04 декабря 2018

Я оцениваю и изучаю React и NextJS для будущего проекта, и пока только поверхностно.Но я уже столкнулся с двумя потенциальными проблемами.И когда люди спрашивают о React, они не могут дать четких ответов.

Справочная информация: Мы используем CMS, которая содержит как структурные данные (возвращаемые в виде JSON), так и изображения (возвращаемые в виде двоичных данных).И структурные данные могут быть разных типов, например, новостная статья, дискуссионная статья, информационная статья о компании и т. Д.

Теперь, невозможно определить, какие это данные, простоглядя на URL .URL-адреса изображений не заканчиваются на .jpg, а URL-адреса новостных статей, например, не начинаются с / news /.Для целей этого вопроса можно предположить, что URL www.oursite.com/12345 может представлять любой из этих видов (например, изображение, дискуссионную статью, новостную статью и т. Д.).

Когда я читаюЧто касается маршрутизации в реакции, все примеры, похоже, вращаются вокруг возможности использовать начало пути для определения того, какой компонент визуализировать.Но мы не можем сделать это в нашем случае. Есть ли способ направить рендеринг на основе ответа json?

Кроме того, как мы должны обрабатывать изображения? Если URL www.oursite.com/12345, как представляется, представляет изображение, тогда внутренний API CMS вернет необработанные двоичные данные, и они должны быть возвращены в браузер как есть.

Мы не можем добавлять какие-либо параметры запроса кизображения , потому что нам нужно обрабатывать прямые запросы к этим изображениям (например, кто-то сохранил старый информационный бюллетень, сохраненный в виде файла HTML на своем компьютере, и он ссылается на www.oursite.com/12345 в теге img.

С уважением/ Джими * * 1 021

1 Ответ

0 голосов
/ 01 февраля 2019

Я бы порекомендовал использовать чистые URL-адреса с функцией маскирования маршрута в файле next.js.

Давайте посмотрим на следующий блок кода:

const PostLink = (props) => (
  <li>
    <Link as={`/p/${props.id}`} href={`/post?title=${props.title}`}>
      <a>{props.title}</a>
    </Link>
  </li>
)

В элементе мы использовали другую опору, называемую «как».Это URL, который мы должны показать в браузере.URL, который видит ваше приложение, упоминается в подпункте «href».

Эта маскировка может помочь в вашем случае.В as prop мы можем связать наши данные с URL.

Для более подробной информации.Перейдите по ссылке.

https://nextjs.org/learn/basics/clean-urls-with-route-masking

...