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

Question

我正在尝试使用 material-ui 创建底部导航栏（链接：https://material-ui.com/components/bottom-navigation/）。

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

最初，我使用 React 中的 Link 组件，它允许我在各种组件之间进行路由。但是，当我将 Link 组件集成到 BottomNavigation 组件中时，样式会发生变化并且不再正常工作。

这是我当前的代码（没有链接组件）：

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

有谁知道我如何像普通的 Link 组件那样实际更改 URL（在使用 BottomNavigation 组件时）？

非常感谢！

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 注入的一个 prop，它允许您通过调用 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>
    );
  }