remix run 不执行动态路由文件

Question

这是一个带有问题示例的stackblitz 。

我的设置是这样的：

我希望有一个 url/posts/something来执行该$slug.tsx文件，但它永远不会被调用，而是404 Not found返回 a 。

这是我第一次使用 remix，但我不确定我做错了什么。

Answer 1

我在这篇文章中找到了答案。

所有 remix 的文档都已过时或至少与新方案无关。

Answer 2

我还浏览了 remix.run 文档中链接的现有“remix 博客教程”：https ://remix.run/docs/en/1.15.0/tutorials/blog

不幸的是，如前所述，一些 Remix 文档已经过时，并且他们没有在博客教程中提及它。

特别是当您到达本教程的“动态路由”部分时： https: //remix.run/docs/en/1.15.0/tutorials/blog#dynamic-route-params - 如果您只是按照教程步骤操作-逐步您会发现以下代码不适用于新安装：

touch app/routes/posts/\$slug.tsx

export default function PostSlug() {
  return (
    <main className="mx-auto max-w-4xl">
      <h1 className="my-6 border-b-2 text-center text-3xl">
        Some Post
      </h1>
    </main>
  );
}

原因如下：

如果您查看remix.config.js文件内部，您将看到以下内容：

module.exports = {
  cacheDirectory: "./node_modules/.cache/remix",
  future: {
    v2_errorBoundary: true,
    v2_meta: true,
    v2_normalizeFormMethod: true,
    v2_routeConvention: true,
  },
  ignoredRouteFiles: ["**/.*", "**/*.css", "**/*.test.{js,jsx,ts,tsx}"],
};

请特别注意以 V2_ 为前缀的内容！因为这就是教程的突破点！

在动态路由的情况下，教程中描述的方式将不起作用，v2_routeConvention: true因为这会告诉您的混音应用程序使用新的路由约定。我将继续使用 V2 路由约定（因为这表面上是事情的发展方向...），如下所述：https ://remix.run/docs/en/1.15.0/pages/v2

文档的该部分告诉您我在这个答案中概述的具体细节。

这些“未来标志”remix.config.js更针对已经在 Remix-run V1 版本中编写的现有应用程序，并且需要能够将其代码库迁移到新约定，而不必立即执行所有操作，因此，让remix 开发人员逐渐迁移到 remix V2 中的新约定。

当从头开始时，就像博客教程的情况一样，它可能会非常令人困惑，因为没有提到去查看“准备 V2”信息（上面链接），其中讨论了这些“未来标志”和更改遵循 Remix 新 V2 版本的惯例。

我希望这可以帮助那些陷入构建 Remix 应用程序的 Remix 动态路由部分的人更清楚地理解问题和解决方案。Remix 无疑是一个有前途且令人兴奋的 React 框架——像这样的小细节确实可以让人们不再使用它，并且可能会在一定程度上减缓它的采用。现在我需要弄清楚如何提交更新文档的建议！

祝你好运并继续编写代码！#混音#反应