时间戳

首页 > 解决方案 > Nextjs 动态路由排除

reactjs - Nextjs 动态路由排除

问题描述

有没有办法在接下来排除一些动态溃败。

标题组件：

export const DynamicCatPageLinks = () => {
  const router = useRouter();

  const relPath = router.route
  const { tv } = router.query


  return (
    <Query query={CategoryList}>
      {({ loading, error, data }) => {
        if (loading) return <h2>Loading...</h2>;
        if (error) return <h1>Error fetching the post!</h1>;
        return (
          <>
            {data.category.map(cat => (
              <li key={cat.id}>
                <Link href=
                    {`/${tv}/category/page/${cat.slug}`}
                >
                  <a category={cat.slug}>{cat.name}</a>
                </Link>
              </li>
            ))}
          </>
        );
      }}
    </Query>
  );
};

页面层次结构

-pages
  -[tv]
   -category
   ...

所以网址是：[tv]/category/page/...

有没有办法限制可以传递给 [tv] 路由的值

这样 url 可以是，例如：

television1/category/page/...
television2/category/page/...
television3/category/page/...
...

但如果你这样做： unknown/category/page/...

它会呈现一个不同的页面，例如 404？

谢谢你。

标签： reactjsnext.js

解决方案

有一个RFC to allow custom Routes and regex带有 NextJS 的路由器

现在，如果它不适合您的白名单参数列表，您可以在组件渲染中获取值并重定向

为此，您可以创建一个自定义钩子，这样您就不必复制逻辑

const whiteList = ['television1', 'television2, 'television3'];
const useWhiteListParams = () => {
   const router = useRouter();
   const { tv } = router.query;
   useEffect(() => {
       if(!whiteList.includes(tv)) {
           router.push(/404);
       }
   }, [tv])

}

推荐阅读