面试题：Next.js 嵌套路由在大型项目模块化设计中的路由参数处理

Question

在 Next.js 的嵌套路由中，假设你有一个多层嵌套的路由结构用于用户资料展示，比如 `/users/[userId]/profile/[section]`，其中 `userId` 和 `section` 都是路由参数。请描述如何在页面组件中获取这些参数，并举例说明如何基于这些参数从 API 中获取相应的数据。

Answer 1

1. 获取路由参数：
   • 在 Next.js 中，对于嵌套路由，可以通过 useRouter 钩子函数来获取路由参数。首先，需要从 next/router 导入 useRouter。

   import { useRouter } from 'next/router';
   
   const ProfilePage = () => {
     const router = useRouter();
     const { userId, section } = router.query;
     return (
       <div>
         <p>User ID: {userId}</p>
         <p>Section: {section}</p>
       </div>
     );
   };
   
   export default ProfilePage;
   

2. 基于参数从 API 获取数据：
   • 假设我们有一个 API 端点，例如 https://example.com/api/users/[userId]/profile/[section]，可以使用 fetch 或者其他 HTTP 请求库（如 axios）来获取数据。以 fetch 为例：

   import { useRouter } from 'next/router';
   import { useEffect, useState } from'react';
   
   const ProfilePage = () => {
     const router = useRouter();
     const { userId, section } = router.query;
     const [profileData, setProfileData] = useState(null);
   
     useEffect(() => {
       const fetchData = async () => {
         if (userId && section) {
           const response = await fetch(`https://example.com/api/users/${userId}/profile/${section}`);
           const data = await response.json();
           setProfileData(data);
         }
       };
       fetchData();
     }, [userId, section]);
   
     return (
       <div>
         {profileData && (
           <div>
             <p>{JSON.stringify(profileData)}</p>
           </div>
         )}
       </div>
     );
   };
   
   export default ProfilePage;
   

这里通过 useEffect 钩子，在 userId 或 section 变化时，发起 API 请求获取相应的数据，并更新组件状态来展示数据。如果使用 axios，代码结构类似，只是请求方式变为 axios.get 等。例如：

import { useRouter } from 'next/router';
import { useEffect, useState } from'react';
import axios from 'axios';

const ProfilePage = () => {
  const router = useRouter();
  const { userId, section } = router.query;
  const [profileData, setProfileData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      if (userId && section) {
        const response = await axios.get(`https://example.com/api/users/${userId}/profile/${section}`);
        setProfileData(response.data);
      }
    };
    fetchData();
  }, [userId, section]);

  return (
    <div>
      {profileData && (
        <div>
          <p>{JSON.stringify(profileData)}</p>
        </div>
      )}
    </div>
  );
};

export default ProfilePage;