CODEWITHSUNDEEP
reactjsreact-routermaterial-uibottomnavigationview
Nicolas O
Nicolas O

Reputation: 151

No impact on URL with Material-UI BottomNavigation

I am trying to create a Bottom Navigation bar using material-ui (link:https://material-ui.com/components/bottom-navigation/).

Unfortunately, when I created the component, clicking on each tap did not affect my URL.

Initially, I was using the Link component from React, which allowed me to route between various components. However, as I integrate the Link component into the BottomNavigation component, the style changes and is not working properly anymore.

Here's my current code (without the Link component):

function NavigationAuth() {
  const [value, setValue] = React.useState("/");

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <BottomNavigation
      value={value} 
      onChange={handleChange} 
      showLabels
    >
      <BottomNavigationAction label="Home" value="/" icon={<HomeIcon />} />
      <BottomNavigationAction label="Progress" value="/home" icon={<TimelineIcon />} />
      <BottomNavigationAction label="Vote" value="/overview" icon={<ThumbsUpDownIcon />} />
      <BottomNavigationAction label="Account" value="/account" icon={<AccountCircleIcon />} />
    </BottomNavigation>
  );
}

Does anyone have an idea how I can actually change the URL (while using the BottomNavigation component) as a normal Link component would do?

Many thanks in advance!

Upvotes: 1

Views: 2583

Answers (2)

radihuq
radihuq

Reputation: 1082

You can import {useHistory} from react-router-dom and use it to change the URL:

function NavigationAuth() {
    const [value, setValue] = React.useState("");
    const history = useHistory();

    const handleChange = (event, newValue) => {
      history.push(`/${newValue}`);
      setValue(newValue);
    };

    return (
      <BottomNavigation
        value={value} 
        onChange={handleChange} 
        showLabels
      >
        <BottomNavigationAction label="Home" value="" icon={<HomeIcon />} />
        <BottomNavigationAction label="Progress" value="progress" icon={<TimelineIcon />} />
        <BottomNavigationAction label="Vote" value="overview" icon={<ThumbsUpDownIcon />} />
        <BottomNavigationAction label="Account" value="account" icon={<AccountCircleIcon />} />
      </BottomNavigation>
    );
  }

Upvotes: 3

Brian Thompson
Brian Thompson

Reputation: 14385

You need both react-router and material-ui to accomplish what you're describing. Material-ui is a UI library and has no intention of providing functionality like routing, only the UI to control routing however you see fit.

Instead of using Link, and assuming this component is wrapped by BrowserRouter at a higher level, change the URL in your handleChange function like this:

const handleChange = (event, newValue) => {
  props.history.push(newValue);
};

history is a prop injected by react-router that lets you programmatically update the URL by calling push.

The other way to do this would be the useHistory hook instead of passing it as a prop.

Upvotes: 0

Related Questions