MUI BottomNavigation跳转新页面后选中状态无法自动更新问题

• 点击底部导航按钮时，handleChange触发时机早于Link组件的路由跳转完成时机，此时读取的props.location.pathname仍是跳转前的旧路径，无法正确设置对应选中态。第二次点击时路由跳转已完成，读取到新路径才能正确赋值，因此需要双击才能更新选中状态。
• 未对路由路径变化做监听，路由跳转完成后没有主动同步更新底部导航的选中值。

修改BottomNav组件，新增useEffect监听路由路径变化，路径更新时自动同步设置对应选中值，修改后完整代码如下：

import * as React from 'react';
import { Paper } from '@mui/material';
import BottomNavigation from '@mui/material/BottomNavigation';
import BottomNavigationAction from '@mui/material/BottomNavigationAction';
import ForumIcon from '@mui/icons-material/Forum';
import { Link } from 'react-router-dom';
import { withRouter } from 'react-router';

import HomeIcon from '@mui/icons-material/Home';
import PersonIcon from '@mui/icons-material/Person';

function BottomNav(props) {
  const [value, setValue] = React.useState(1);

  // 监听路由路径变化，自动同步选中值
  React.useEffect(() => {
    const path = props.location.pathname;
    if(path == '/match'){
      setValue(0);
    } else if(path == '/'){
      setValue(1);
    } else if(path == '/profile'){
      setValue(2);
    }
  }, [props.location.pathname])

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

  return (
    <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} elevation={3}>
      <BottomNavigation
        value={value}
        onChange={handleChange}
        showLabels
      >
        <BottomNavigationAction 
        component={Link}
        to="/match" 
        label="Matches" 
        icon={<ForumIcon />} />

        <BottomNavigationAction 
        component={Link}
        to="/" 
        label="Home" 
        icon={<HomeIcon />} />

        <BottomNavigationAction 
        component={Link}
        to="/profile" 
        label="Profile" 
        icon={<PersonIcon />} />
      </BottomNavigation>
    </Paper>
  );
}

export default withRouter(BottomNav);

内容的提问来源于stack exchange，提问作者Daniel