[BottomNavigation] Link docs

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

In my app, I use nextjs links for navigation items. But BottomNavigationItem doesn’t support Link (Next.js)

Examples 🌈

Motivation 🔦

[topovik]

A simple solution:

import { useRouter } from "next/router";
const router = useRouter();

  const onLink = (href) => {
    router.push(href);
  };

return (
    <BottomNavigation
      value={value}
      onChange={(event, newValue) => {
        setValue(newValue);
      }}
      showLabels
      className={classes.root}
    >
          <BottomNavigationAction label="Recents" icon={<RestoreIcon />} onClick={() => onLink("/recent")} />
          <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} onClick={() => onLink("/favorites")} />
          <BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} onClick={() => onLink("/nearby")} />
    </BottomNavigation>
  )

[tomsturge]

The problem we are facing is that the BottomNavigationAction creates a button element and we want an anchor tag. A link driven by JS on a button is detrimental for SEO