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

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

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

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

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

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

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

С уважением
/ Джими


reactjs next.js react-router
person j5423951    schedule 04.12.2018    source источник
comment
О длинное описание. Стоит ли читать?   -  person Blasanka    schedule 04.12.2018
comment
@Blasanka Краткое резюме: как выполнять маршрутизацию строго на основе данных json из бэкэнда? И как обрабатывать изображения, если мы не знаем, что это изображения, прежде чем мы получим их из серверной части?   -  person j5423951    schedule 04.12.2018

Ответы (1)


arrow_upward
1
arrow_downward

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

Lets have a look at the following code block: 

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

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

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

Больше подробностей. Перейди по ссылке.

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

person Mustkeem K    schedule 01.02.2019
comment
Спасибо! В итоге мы сделали именно это. Хотя это решало проблемы только на клиенте. Я забыл упомянуть SSR в своем вопросе, но мы нашли решение и для этого. Пользовательский сервер nextjs, который извлекает данные json и анализирует их, чтобы определить, какую страницу отображать. - person j5423951; 12.02.2019
comment
Единственная проблема, с которой мы сталкиваемся с этим подходом, заключается в том, что нам нужен уродливый список исключений шаблонов URL, которые мы должны игнорировать (например, / _next / *, / static / *, / babel / * и т. Д.), Поскольку нет шаблон, который соответствует всем URL-адресам, которые должны быть получены из бэкэнда, который также не соответствует URL-адресам, которые следует игнорировать. Было бы более чистым решением, если бы мы могли позволить next обрабатывать запрос в первую очередь, и только если он не смог найти какой-либо файл / страницу / и т. Д., Тогда наше промежуточное программное обеспечение могло бы взять на себя. Но я пока не нашел способа сделать это ... - person j5423951; 12.02.2019
comment
@ j5423951 хотел бы увидеть пример. У меня точно такая же проблема - person garrettmac; 22.11.2019