Home/ Questions/Q 3276
Answered
Simmon
Asked: 2022-08-20T09:48:52+00:00

Navigating to routes in nextJs

I am very new to nextJS, and am trying to create a basic app where we have a header, and the header has 3 buttons clicking which the users should be redirected to the required route. The header should be present in all the pages, hence have put it in _app.js itself. Clicking on either of the 3 buttons does show a change in URL, but the component doesn’t get rendered, and I am struggling to understand why that’s happening. All the 3 files which we need to route to have been created under the ‘pages’ folder, and have their names set as expected.

The _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;

The header.js(from 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(/<span>${comp}</span>)
  }
  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;

Finally, the users.js, which I want to load below this header:

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

export default Users;

Any help is greatly appreciated!

navigationnextjs
Share

1 Answer

  1. Best Answer

    I found the mistake, I had removed the rendering of ‘Component’ from _app.js, hence the components weren’t loading. The _app.js now becomes:

    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 />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;
    • 0

Leave an answer

You must login to add an answer.

Need An Account,