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上重定向我，但是当我单击时会出错，因为第一个URL colors/red与此类型不相等：colors。因此，我必须在colors之后放一些东西，以使事情发生。
该如何解决呢？以及如何使我的第一条路线接受最后一个参数作为可选参数？？

Answer 1

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

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

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>
    );
}

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

1 个答案: