使用 Material-UI BottomNavigation 对 URL 没有影响

Question

我正在尝试使用 material-ui (link:https://material-ui.com/components/bottom-navigation/) 创建底部导航栏。

不幸的是，当我创建组件时，每次点击都不会影响我的 URL。

最初，我使用的是 React 的 Link 组件，它允许我在各种组件之间进行路由。但是，当我将 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 组件一样？

非常感谢！

Answer 1

您需要 react-router 和 material-ui 才能完成您所描述的内容。 Material-ui 是一个 UI 库，无意提供路由之类的功能，只有 UI 来控制您认为合适的路由。

而不是使用 Link，并假设此组件在更高级别由 BrowserRouter 包装，更改 handleChange 函数中的 URL，如下所示：

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

history 是由 react-router 注入的道具，它允许您通过调用 push.

以编程方式更新 URL

另一种方法是 useHistory hook 而不是将其作为道具传递。

Answer 2

您可以从 react-router-dom 导入 {useHistory} 并使用它来更改 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>
    );
  }

使用 Material-UI BottomNavigation 对 URL 没有影响

No impact on URL with Material-UI BottomNavigation

reactjs

react-router

material-ui

bottomnavigationview