如何在nextJs中导航到路线（附代码）我是nextJS的新手，我试图创建一个基本的应用程序，我们有一个头，头有3个按钮

我是nextJS的新手，我试图创建一个基本的应用程序，我们有一个头，头有3个按钮，用户点击后应该被重定向到所需的路线。这个标题应该出现在所有的页面中，因此我们把它放在_app.js中。点击这3个按钮中的任何一个，都会显示URL的变化，但组件并没有被呈现出来，我很难理解为什么会发生这种情况。我们需要访问的所有3个文件都是在 "pages "文件夹下创建的，而且它们的名字都是按预期设置的。

_app.js

import Head from "next/head";
import Header from "./components/header";

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <title>GameZop Assignment</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Header />
    </>
  );
}

export default MyApp;

header.js（来自MUI）

const drawerWidth = 240;
const navItems = [
  { value: "users", label: "Users" },
  { value: "news", label: "News" },
  { value: "topUsers", label: "Top Users" },
];

function Header(props) {
  const { window } = props;
  const router  = useRouter();
  
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const showComponent = (comp) => {
    router.push(`/${comp}`)
  }
  const handleDrawerToggle = () => {
    setMobileOpen(!mobileOpen);
  };

  const drawer = (
    <Box onClick={handleDrawerToggle} sx={{ textAlign: "center" }}>
      <Typography variant="h6" sx={{ my: 2 }}>
        MUI
      </Typography>
      <Divider />
      <List>
        {navItems.map((item) => (
          <ListItem key={item.value} disablePadding>
            <ListItemButton sx={{ textAlign: "center" }}>
              <ListItemText primary={item.label} />
            </ListItemButton>
          </ListItem>
        ))}
      </List>
    </Box>
  );

  const container =
    window !== undefined ? () => window().document.body : undefined;

  return (
    <Box sx={{ display: "flex" }}>
      <AppBar component="nav">
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            edge="start"
            onClick={handleDrawerToggle}
            sx={{ mr: 2, display: { sm: "none" } }}
          >
            <MenuIcon />
          </IconButton>
          <Typography
            variant="h6"
            component="div"
            sx={{ flexGrow: 1, display: { xs: "none", sm: "block" } }}
          >
            Assignment
          </Typography>
          <Box sx={{ display: { xs: "none", sm: "block" } }}>
            {navItems.map((item) => (
              <Button
                key={item}
                sx={{ color: "#fff" }}
                onClick={() => showComponent(item.value)}
              >
                {item.label}
              </Button>
            ))}
          </Box>
        </Toolbar>
      </AppBar>
      <Box component="nav">
        <Drawer
          container={container}
          variant="temporary"
          open={mobileOpen}
          onClose={handleDrawerToggle}
          ModalProps={{
            keepMounted: true, // Better open performance on mobile.
          }}
          sx={{
            display: { xs: "block", sm: "none" },
            "& .MuiDrawer-paper": {
              boxSizing: "border-box",
              width: drawerWidth,
            },
          }}
        >
          {drawer}
        </Drawer>
      </Box>
    </Box>
  );
}

Header.propTypes = {
  window: PropTypes.func,
};

export default Header;

最后是 users.js，我想把它加载到这个头的下面：

function Users(){
    return (
        <>
            <h2>Hello from users</h2>
        </>
    )
}

export default Users;

如果有任何帮助，我们将不胜感激。