导航到新页面时，BottomNavigation 不更新

Posted 2023-02-21

【中文标题】导航到新页面时，BottomNavigation 不更新

【英文标题】：BottomNavigation does not update when navigating to new page

【发布时间】：2021-11-15 10:23:09

【问题描述】：

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

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

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

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;

【参考方案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>
  );

【讨论】：

在这种情况下，handleChange 函数会是什么？

哦，神经，我把它整理出来了！非常感谢！