next.js - NextJs 动态文件夹路由

Question

我试图实现一个你有两个单独的导航栏的情况，带有链接“结果”、“统计”的视图导航和带有链接“学校-a”、“学校-b”、“学校-c”的学校-导航.. . 当用户第一次登陆时，url 看起来像这样：

  https://example.com/results/school-a 

设想：

1. 点击 .views-nav 链接[statistics] => https://example.com/statistics/school-a
2. 然后点击 .schools-nav 链接[school-c] => https://example.com/statistics/school-c
3. 然后点击 .views-nav 链接[results] => https://example.com/results/school-c
4. 然后点击 .schools-nav 链接[school-b] => https://example.com/results/school-b
5. 然后点击 .views-nav 链接 [statistics] => https://example.com/statistics/school-b

尝试手动访问https://example.com/statistics/或https://example.com/results/应该重定向到 404。

预期行为：点击 navbar[views] 链接在结果和统计数据之间切换，同时保持学校 slug，点击 navbar[schools] 链接在学校之间切换，同时保持视图 slug。

当前文件夹结构是

       -pages
           |
           -[views]
                 |
                 -[schools].js

./Navbar.jsx

    import { useRouter } from "next/router";

    const Navbar = () => {
    
    const { ??? } = useRouter();

    return (

     <nav>
      <div className="views-nav">
       <Link href=`/results/${???}`>
        results
       </Link>
       <Link href=`/statistics/${???}`>
        results
       </Link>
      </div>

      <div className="schools-nav">
       <Link href=`/${???}/school-a`>
        school-a
       </Link>
       <Link href=`/${???}/school-b`>
        school-b
       </Link>
       <Link href=`/${???}/school-c`>
        school-c
       </Link>
      </div>
     </nav>

    )

现在我的猜测是用 useRouter 做点什么，但我不知道该怎么做。有人可以指出我正确的方向吗？

Answer 1

这应该适合你。

./Navbar.jsx

import { useRouter } from "next/router";

const Navbar = () => {

const router = useRouter();

return (

 <nav>
  <div className="views-nav">
   <Link href=`/results/${router.query.schools}`>
    results
   </Link>
   <Link href=`/statistics/${router.query.schools}`>
    results
   </Link>
  </div>

  <div className="schools-nav">
   <Link href=`/${router.query.views}/school-a`>
    school-a
   </Link>
   <Link href=`/${router.query.views}/school-b`>
    school-b
   </Link>
   <Link href=`/${router.query.views}/school-c`>
    school-c
   </Link>
  </div>
 </nav>

)