在下一个js中以不同的方式访问路由

Question

我在 nextjs 中有一个应用程序。我在那里建立了下一条路线：

 <Link
    href="colors/[type]"
    as={`colors/${type}`}
  >
    <a>click</a>
</Link>

这条路线将我重定向到/colors/red 或colors/blue 等等，具体取决于用户。 type 这里是一个变量 = 动态元素。

我还有其他链接：

 <Link href="colors">
    <a>click to colors</a>
</Link>

这条路线应该将我重定向到/colors，但是当我点击时我得到错误，因为第一个网址colors/red 不等于这种类型：colors。所以我必须在colors 之后添加一些东西才能让事情发生。
如何解决问题？以及如何让我的第一条路由接受最后一个参数作为可选参数。？

Answer 1

最好的方法是使用动态路由 (more)。首先在您的/colors 文件夹中创建一个名为[[...type]].js 的新页面，该页面将捕获/colors 或/colors/red。此设置还将捕获/colors/red/blue 之类的路线。

您可以使用下一个路由器检索 url 的可变部分（参见下面的示例）。

import React from 'react';
import Link from "next/link";
import {useRouter} from "next/router";

export default () => {
    const router = useRouter()
    const { type } = router.query;

    return (
        <div>
            <Link href={'/'}>
                Home
            </Link>

            <Link href={'/colors/red'}>
                Red
            </Link>

            <Link href={'/colors/blue'}>
                Blue
            </Link>

            <div>
                {type ? (
                    `Type: ${type}`
                ) : (
                    'no type'
                )}
            </div>
        </div>
    );
}