Question

接下来是否有排除某些动态溃败的方法。

标题组件：

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]路由的值

这样的网址可以是：

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

但是，如果您执行以下操作： unknown/category/page/...

例如，它呈现一个类似404的页面？

谢谢。

Answer 1

NextJS路由器中有RFC to allow custom Routes and regex

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

为此，您可以创建一个自定义钩子，从而不必重复逻辑

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

}

Nextjs动态路由排除

1 个答案: