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

Question

我正在尝试使用 material-ui（链接： 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-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>
    );
  }

Answer 2

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

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

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

history是由react-router注入的一个 prop，它允许您通过调用push以编程方式更新 URL。

另一种方法是使用useHistory挂钩，而不是将其作为道具传递。