使用 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掛鈎，而不是將其作為道具傳遞。