0

我正在使用react-router和material-ui。我有一个 BottomNavigation 和 BottomNavigationAction (MaterialUI) （带有来自 Reach Router 的 Link 组件）。

import { Link } from "@reach/router"

const useStyles = makeStyles((theme) => ({
myButtomNavigation: {
  color: '#000',
  '&$selected': {
    paddingTop: '16px',
  },
},
selected: {
},
}));


export default function Navigation(props) {
  const [value, setValue] = React.useState('INIT');
  const classes = useStyles();

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return(
      <BottomNavigation value={value} onChange={handleChange}>
      <BottomNavigationAction showLabel={false} value="INIT" icon={<HomeOutlinedIcon />}  component={Link} to="/" classes={{root: classes.myButtomNavigation, selected: classes.selected}} />
      <BottomNavigationAction showLabel={false} value="ANIMALS" icon={<PetsOutlinedIcon />} component={Link} to="/animals" classes={{root: classes.myButtomNavigation, selected: classes.selected}}/>
      <BottomNavigationAction showLabel={false} value="ROUTINE" icon={<NotificationsOutlinedIcon />} component={Link} to="/activities" classes={{root: classes.myButtomNavigation, selected: classes.selected}} />
      <BottomNavigationAction showLabel={false} value="SETTINGS" icon={<SettingsOutlinedIcon />} component={Link} to="/configuration" classes={{root: classes.myButtomNavigation, selected: classes.selected}} />
    </BottomNavigation>
  );
}

当有人从浏览器输入与根路径不同的 url 时，我很难知道如何获取当前活动的链接并将其设置为 BottomNavigation 的值。当我使用根路径（localhost:3000/）进入时：一切正常（因为我将值设置为根路径）。当我使用其他路径输入时，例如 localhost:3000/animals 我需要设置正确的值，以便正确的图标显示为活动状态。

Reach Router 在 Link 组件中提供了一种可能性：将函数传递给 getProps，您可以返回当前活动链接的样式，但样式会影响锚元素，我需要影响其他对象（https://reach.tech/router/示例/活动链接）。

当有人从浏览器输入路径（而不是根路径）时，如何根据当前活动链接设置底部导航的值？

4

1 回答 1

0

在 react-router-dom 中，我使用带有属性 (activeClassName="current") 而不是 Link 的 NavLink，也许在 Reach Router 中有类似的东西。

于 2020-06-12T18:50:23.643 回答