如果路径不包含有关数据类型的线索，React/NextJS 如何处理路由和图像？

Question

我正在为未来的项目评估和学习 React 和 NextJS，到目前为止只触及了皮毛。但是我已经遇到了两个潜在的问题。当询问对 React 更了解的人时，他们无法给出任何明确的答案。

背景：我们使用的 CMS 包含结构数据（returned 作为 JSON）和图像（returned 作为二进制数据）。结构数据可以是不同类型的，比如新闻文章、辩论文章、公司信息文章等

现在，无法仅通过查看 URL 来检测它是哪种数据。例如，图片 URLs 不以 .jpg 结尾，新闻文章 URLs 不以 /news/ 开头。出于这个问题的目的，可以假设 URL www.oursite.com/12345 可以代表这些类型中的任何一种（即图像、辩论文章、新闻文章等）。

当我阅读 React 中的路由时，所有示例似乎都围绕着能够使用路径的开头来检测要渲染的组件。但我们不能这样做。 是否有任何方法可以根据 json 响应路由渲染？

另外，图片应该怎么处理？如果URLwww.oursite.com/12345恰好代表一张图片，那么后端 CMS API 将 return 原始二进制数据，并且应该 return 按原样发送到浏览器。

我们不能向图像附加任何类型的请求参数，因为我们需要处理对这些图像的直接请求（例如，某人将旧时事通讯另存为他计算机上的一个 HTML 文件，它在 img 标签中引用 www.oursite.com/12345。

此致
/几米

Answer 1

我建议使用具有 next.js 路由屏蔽功能的 Clean URLs。

让我们看一下下面的代码块：

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 属性中，我们可以将我们的数据与 url.

如果路径不包含有关数据类型的线索，React/NextJS 如何处理路由和图像？

How can React/NextJS handle routing and images if the path contains no clues about type of data?

reactjs

react-router

next.js