Не влияет на URL с Material-UI BottomNavigation - PullRequest
Новая
       36

Не влияет на URL с Material-UI BottomNavigation

0 голосов
/ 05 ноября 2019

Я пытаюсь создать панель навигации снизу, используя material-ui (ссылка: https://material -ui.com / components / bottom-navigation / ).

К сожалению, когдаЯ создал компонент, нажатие на каждое нажатие не влияло на мой URL.

Изначально я использовал компонент Link из React, который позволял мне прокладывать маршрут между различными компонентами. Однако, когда я интегрирую компонент Link в компонент BottomNavigation, стиль меняется и больше не работает должным образом.

Вот мой текущий код (без компонента Link): 

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>
  );
}

у кого-нибудь есть идея, как я могу изменить URL (при использовании компонента BottomNavigation), как это сделал бы обычный компонент Link?

Большое спасибо заранее!

Ответы [ 2 ]

2 голосов
/ 05 ноября 2019

Вы можете импортировать {useHistory} из react-router-dom и использовать его для изменения 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>
    );
  }
0 голосов
/ 05 ноября 2019

Вам нужно и react-router, и material-ui, чтобы выполнить то, что вы описываете. Material-ui - это библиотека пользовательского интерфейса, которая не намерена предоставлять такие функции, как маршрутизация, только пользовательский интерфейс для управления маршрутизацией, как вам удобно.

Вместо использования Link и предположения, что этот компонент заключен в BrowserRouter на более высоком уровне измените URL в вашей функции handleChange следующим образом: 

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

history - это реквизит, введенный react-router, который позволяет программно обновлять URL, вызывая push.

Другим способом сделать это был бы useHistory крюк вместо передачи его в качестве опоры.

...