重定向至NextJS配置文件中使用正则表达式的动态路由

h9a6wy2h 于 2023-10-18 发布在其他

关注(0)|答案(1)|浏览(138)

我的问题是，我正在建立一个新的网站，在我的旧的有一些页面与子路由/饲料。
举例来说：www.mypage.com/blogs/blog-1/feed
所以，我试图做的是从 /blogs/blog-1/feed 重定向到 /blogs/blog-1，但现在它显示一个404错误。
这些博客页面是动态的，它们在一个[slug].tsx文件中，所以我尝试创建一个[. slug].tsx文件，但是因为我使用了getStaticPaths和getStaticProps方法，所以它不起作用（或者我不知道如何正确地做）。
所以，我的另一个选择，也是我认为最合适的选择，是在next.config.js上添加某种重定向正则表达式：

{
    source: '/blogs/:slug(/\feed/)',
    destination: '/blogs/:slug',
    permanent: true,
  },

我说得对吗，还有更好的办法吗？因为很明显我放进去的代码不起作用，我没有告诉配置文件如何从：slug中删除'/feed'片段。
提前感谢：）

next.js

来源：https://stackoverflow.com/questions/67874499/redirect-to-dynamic-route-with-regex-on-nextjs-config-file

1条答案

按热度按时间

trnvg8h31#

如果路由的第一部分在新旧站点之间不同，则需要next.config.js中的路径匹配选项，当前文档如下
引用文档：
要匹配路径，可以在参数后使用*，例如/blog/:slug*将匹配/blog/a/b/c/d/hello-world
但是您的新旧路由开始是相同的，/blogs，所以在您的next.config.js中重定向对我来说似乎没有必要。
您应该在文件的实际名称中使用[...slug].tsx语法，以匹配/blogs之后的任何内容-这在此处有文档说明
在这种情况下，您的页面应该位于/pages/blogs/[...slug].tsx。这将匹配对/blogs/blog-1或/blogs/blog-1/feed的请求，并在getStaticProps中提供["blog-1"]或["blog-1","feed"]作为slug参数-使用JavaScript而不是typescript，如下所示：

export async function getStaticProps({ params: { slug } }) {
  // do stuff
  return {
    props: {
      foo: "bar",
    }
  };
}

这将传递一个属性foo，其值为字符串bar到您的主页面函数：

export default function Blog({foo}) {
  return (<>{foo}</>);
}
// output is just the string bar.

注意，使用[...slug].tsx语法将导致一个数组（["blog-1"]）被传递到页面，而[slug].tsx将传递一个字符串（"blog-1"）。

这听起来不像，但您可能还想看看看起来像[[...slug]].tsx的可选捕获所有段。

赞(0）回复(0）举报 2023-10-18

我来回答

重定向至NextJS配置文件中使用正则表达式的动态路由

1条答案

相关问题

热门标签

最新问答