我正在尝试学习如何在单击链接时使用next.js在布局中呈现组件。
我的布局如下：

import * as React from "react"
import { Box } from "@chakra-ui/layout"

import { Limiter } from "./Limiter"
import { Nav } from "./Nav"
import {Footer} from "components/footer/index"

interface Props {
  children: React.ReactNode
}

export function HomeLayout(props: Props) {
  return (
    <Box>
      <Nav />
      <Limiter pt="65px">{props.children}</Limiter>
      <Footer />
    </Box>
  )
}

我希望使NAV和页脚组件保持不变，然后当单击页脚的链接时，我希望href用包含已单击链接的文本的组件填充上面的pros.Child。我可以找到演示如何在点击链接时呈现新页面的教程，但我找不到一个教程来展示如何使用pros.Child(我仍然不能理解这些词的实际含义，从而知道我应该使用什么搜索词来研究潜在的原理)来呈现特定的组件，但仍然显示导航和页脚。
我有一个页脚，它有：

import {
    Box,
    Button,
    ButtonGroup,
    Container,
    Divider,
    IconButton,
    SimpleGrid,
    Stack,
    Text,
  } from '@chakra-ui/react'
  import * as React from 'react'
  import { Logo } from '../../components/Logo'
  import { links } from './_data'

  export const Footer = () => (

    <Box
      w="100%"
      mt={10}
      borderTop="1px solid"
      borderColor="gray.200"
      zIndex={500}
    >
      <Box w="80%" ml="10%">

                <Stack
                justify="space-between"
                align="start"
                direction={{ base: 'column', lg: 'row' }}
                py={{ base: '12', md: '16' }}
                spacing="8"
                >
                <Stack spacing={{ base: '6', md: '8' }} align="start">
                    <Logo />

                </Stack>
                <SimpleGrid columns={{ base: 3 }} gap="20" width={{ base: 'full', lg: 'auto' }} >
                    {links.map((group, idx) => (
                    <Stack key={idx} spacing="4" minW={{ lg: '40' }} >
                        <Text fontSize="sm" fontWeight="semibold" >
                        {group.title}
                        </Text>
                        <Stack spacing="3" shouldWrapChildren>
                        {group.links.map((link, idx) => (
                            <Button 
                                key={idx} 
                                as="a" 
                                variant="link" 
                                href={link.href} 
                                fontWeight="normal" 
                                color="brand.sludge"
                                _hover={{
                                    color: "green"}}
                            >
                            {link.label}
                            </Button>
                        ))}
                        </Stack>
                    </Stack>
                    ))}
                </SimpleGrid>
                </Stack>

      </Box>
    </Box>
  )

然后，my_data.tsx文件具有：

export const links = [
    {
      title: 'Company',
      links: [
        { label: 'About us', href: '' },
        { label: 'Contact', href: '#' },

      ],
    },
]

我的目标是用一个组件填充屏幕(在导航和页脚之间)，如果单击About Us，则该组件具有要呈现的文本，然后，如果单击Contact，则使用文本填充另一个组件。
我被困在试图找到一种方法来做到这一点--因为所有的教程都假设我想要创建一个新的页面。有没有办法防止导航和页脚重新加载？