React Router v5中history.push不是函数的问题求助

问题描述 #

我在React项目中使用react-router-dom@5.3.4版本，已从react-router-dom正确导入useHistory，但调用history.push("/")时出现错误：

ERROR history.push is not a function TypeError: history.push is not a function

相关代码如下：

import { Avatar, Box, Button, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Text, Tooltip } from '@chakra-ui/react';
import { BellIcon, ChevronDownIcon } from '@chakra-ui/icons';
import { color } from 'framer-motion';
import React, { useState } from 'react';
import { ChatState } from '../../Context/ChatProvider';
import ProfileModal from './ProfileModal';
import { useHistory } from 'react-router-dom';

const SideDrawer = () => {
  const [search, setSearch] = useState("");
  const [searchResult, setSearchResult] = useState([]);
  const [loading, setLoading] = useState(false);
  const [loadingChat, setLoadingChat] = useState();

  const { user } = ChatState();

  const  history = useHistory();

  const logoutHandler = () => {
      localStorage.removeItem("userInfo");
      history.push("/");
  };

  return (
    <div>
      <Box display={"flex"}
           justifyContent={"space-between"}
           alignItems={"center"}
           width={"100%"}
           p={"5px 10px 5px 10px"}
           borderWidth={"5px"}
           bg={'rgba(0, 0, 0, 0.5)'}
           borderColor={"#107869"}
           >
        <Tooltip 
        label = "Search For Users" 
        hasArrow 
        placement='bottom-end'
        >
          <Button variant={'ghost'} color={"#e02929"}>
            {/* <i className="fa-light fa-magnifying-glass" style={{ color: '#0e490f' }}></i> */}
            <i class="fas fa-search"></i>
            <Text display={{base: 'none', md: "flex"}} px={"4"}>
              Search
            </Text>
          </Button>
        </Tooltip>

        <Text fontSize={"4xl"}
              fontFamily={"Work sans"}
              color={"white"}
              >
          Hatchat
        </Text>

        <div>
          <Menu>
            <MenuButton p={1}>
              <BellIcon fontSize={"2xl"} m={1} />
            </MenuButton>
            {/* <MenuList></MenuList> */}
          </Menu>

          <Menu>
            <MenuButton as={Button} 
                        rightIcon={<ChevronDownIcon />}
                        >
              <Avatar size={"sm"} 
                      cursor={"pointer"}
                      name={user.name}
                      src={user.pic} 
                      />
            </MenuButton>
            <MenuList>
              <ProfileModal user={user}>
                  {/* <MenuItem color={"#107869"}> My Profile </MenuItem> */}
              </ProfileModal>
              <MenuDivider/>
              <MenuItem color={"#107869"} onClick={logoutHandler}> Logout </MenuItem>
            </MenuList>
          </Menu>
        </div>
      </Box>
    </div>
  )
};

export default SideDrawer;

排查方向与解决建议 #

• 检查组件是否被Router包裹
  useHistory钩子只能在BrowserRouter（或HashRouter等Router组件）的上下文范围内使用。如果SideDrawer组件不在Router的包裹层级内，useHistory会返回无效对象，导致push方法不存在。确认根组件结构类似这样：

  import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
  import SideDrawer from './path/to/SideDrawer';
  
  function App() {
    return (
      <Router>
        <Switch>
          {/* 其他路由配置 */}
          <Route path="/chat" component={SideDrawer} />
        </Switch>
      </Router>
    );
  }
  

• 检查react-router与react-router-dom版本一致性
  确保项目中react-router和react-router-dom版本完全一致，版本不兼容会导致上下文传递异常。查看package.json中的版本号，若不一致，执行以下命令重新安装：

  npm uninstall react-router react-router-dom
  npm install react-router-dom@5.3.4
  

• 检查自定义history对象的使用
  如果项目中手动创建了history对象并传入Router，确保对象创建和传递方式正确。v5版本的正确用法示例：

  import { createBrowserHistory } from 'history';
  import { Router, Route, Switch } from 'react-router-dom';
  
  const history = createBrowserHistory();
  
  function App() {
    return (
      <Router history={history}>
        {/* 路由内容 */}
      </Router>
    );
  }
  

• 检查ChatProvider的层级位置
  若ChatProvider在Router组件的外层，可能会干扰Router上下文的传递。确保Router是ChatProvider的父组件，或者ChatProvider没有阻断上下文的传递。

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