面试题：Next.js中动态路由与布局搭配的基础实现

Question

在Next.js项目里，假设你要创建一个博客系统，文章页面需要动态路由，每个文章有共同的头部和侧边栏布局。请描述如何创建动态路由页面，并将其与共享布局搭配起来，同时写出关键代码示例。

Answer 1

创建动态路由页面

1. 文件结构：在 pages 目录下创建一个带方括号的文件夹，例如 pages/post/[id].js，id 为动态参数。
2. 获取动态参数：在 [id].js 中，使用 useRouter 钩子函数获取动态参数。

搭配共享布局

1. 布局组件：创建一个布局组件，例如 layouts/BlogLayout.js，包含共同的头部和侧边栏。
2. 嵌套使用：在动态路由页面 [id].js 中引入布局组件，并将页面内容包裹在布局组件内。

关键代码示例

1. 动态路由页面 [id].js

import React from'react';
import { useRouter } from 'next/router';
import BlogLayout from '../layouts/BlogLayout';

const PostPage = () => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <BlogLayout>
      <h1>文章 {id}</h1>
      {/* 文章具体内容 */}
    </BlogLayout>
  );
};

export default PostPage;

2. 布局组件 BlogLayout.js

import React from'react';

const BlogLayout = ({ children }) => {
  return (
    <div>
      {/* 头部 */}
      <header>
        <h1>博客头部</h1>
      </header>
      <div style={{ display: 'flex' }}>
        {/* 侧边栏 */}
        <aside>
          <p>侧边栏内容</p>
        </aside>
        {/* 页面主体 */}
        <main>{children}</main>
      </div>
    </div>
  );
};

export default BlogLayout;