导航到新页面时 BottomNavigation 不更新

Question

我在为我的网站构建底部导航栏时遇到了这个问题：

所以它有 3 个按钮，Home、Profile、Matches。我想在它们之间切换。但是，我注意到，当我单击配置文件按钮时，页面会切换到配置文件选项卡，但该按钮仍保持在相同的主页位置，直到我双击它。于是调试发现这个问题：

显然当我点击按钮时，它仍然停留在同一条路径上？这是我的底部导航代码：

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

  console.log('current path', props.location.pathname);

  const handleChange = () => {
    if(props.location.pathname == '/match'){
      setValue(0);
    }

    if(props.location.pathname == '/'){
      setValue(1);
    }

    if(props.location.pathname == '/profile'){
      setValue(2);
    }

    console.log('value is', value, 'on path', props.location.pathname);
  }

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

这是包含导航栏的组件：

import React from "react";
import { Route, Switch } from "react-router-dom";
import Login from "../../Auth/Login";
import Logout from "../../Auth/Logout";
import Register from "../../Auth/Register";
import Dashboard from "../../Dashboard";
import Landing from "../../Landing";
import Profile from "../../Profile";
import Home from "../../Home"
import { Role } from "../Authentication";
import ProtectedRoute from "../Authentication/ProtectedRoute";
import ErrorRoute from "./ErrorRoute";
import CreateListing from '../../Listing/CreateListing';
import UpdateListing from '../../Listing/UpdateListing';
import ListingList from '../../Listing';
import ListingDisplay from '../../Listing/ListingDisplay';
import Forgot from "../../Auth/Forgot";
import AddBio from "../../Profile/AddBio";
import Match from "../../Match/Match";
import BottomNav from "../Navigation/BottomNav";

const Router = () => (
  <>
  <Switch>
    <Route exact path="/login" component={Login} />
    <Route exact path="/logout" component={Logout} />
    <Route exact path="/register" component={Register} />
    <Route exact path="/forgot" component={Forgot} />
    <Route exact path="/landing" component={Landing} />
    {/* Protected */}
    <ProtectedRoute exact roles={[Role.Admin]} path="/dashboard" component={Dashboard} />
    <ProtectedRoute exact roles={[Role.Flatee]} path="/addbio" component={AddBio} />
    <ProtectedRoute exact roles={[Role.Flat]} path="/newlisting" component={CreateListing} />
    <ProtectedRoute exact path="/" component={Home} />
    <ProtectedRoute exact roles={[Role.Flat]} path="/updatelisting" component={UpdateListing} />
    <ProtectedRoute exact roles={[Role.Flat]} path="/listings" component={ListingList} />
    <ProtectedRoute exact path="/listing/display" component={ListingDisplay} />
    <ProtectedRoute exact path="/profile" component={Profile} />
    <ProtectedRoute exact path="/match" component={Match} />
    <Route component={ErrorRoute} />
  </Switch>
  <BottomNav/>
  </>
);

export default Router;

Answer 1

那是因为在 handleChange 回调触发时，你还在当前路由上，在 react-router 导航到新页面之前，所以 location.pathname 没有设置新路线。并且 setState() 设置当前索引变量，因此没有任何变化

const handleChange = () => {
  if(props.location.pathname == '/match'){
    setValue(0);
  }

  // when you're on home page and click the profile tab, setState(1) is called
  // which is meaningless
  if(props.location.pathname == '/'){
    setValue(1);
  }

  if(props.location.pathname == '/profile'){
    setValue(2);
  }

  console.log('value is', value, 'on path', props.location.pathname);
}

当react-router导航到新页面时，BottomNav将被重新渲染，你应该根据更新后的props.location.pathname:

获取索引

function getPageIndex(route) {
  switch (route) {
    case '/match': return 0;
    case '/': return 1;
    case '/profile': return 2;
    default: return 0;
  }
}

function BottomNav(props) {
  const value = getPageIndex(props.location.pathname);

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

Answer 2

我可能正在阅读的其他人也有同样的问题，在我的情况下，我输入错误..应该是：

import { Link } from "react-router-dom";

导航到新页面时 BottomNavigation 不更新

BottomNavigation does not update when navigating to new page

navigationbar

reactjs

react-router

material-ui