react-router-dom useHistory 返回未定义答案

【问题标题】：react-router-dom useHistory returns undefinedreact-router-dom useHistory 返回未定义
【发布时间】：2022-01-27 09:10:02
【问题描述】：

在 react-router-dom v 5.2.0 上，useHistory 的导入返回“未定义”（即使在 console.log() 中）

基本上，我正在尝试构建一个 optionMenu Navbar，让我链接到另一条路线，例如主页。

这是我的 optionMenu.jsx 文件：

import React  from 'react';
import Navbar from 'react-bootstrap/Navbar';
import { useHistory } from "react-router-dom";
import { Container, Nav, Form, Button, NavDropdown, FormControl } from 'react-bootstrap';

const OptionMenu = () => {

 let history   = useHistory();
 console.log(useHistory());

 const routing = route => () => {
    history.push({pathname: route})
 }

return (
    <Navbar bg="light" expand="lg">
        <Container>
            <Navbar.Brand onClick={routing('/')}>Vehiculos</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="me-auto">
                <NavDropdown title="Marcas" id="basic-nav-dropdown">
                <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                </NavDropdown>
            <Form className="d-flex">
                <FormControl
                type="search"
                placeholder="Precio Menor o igual a:"
                className="me-2"
                aria-label="Search"
                />
                <Button variant="outline-success">Buscar</Button>
            </Form>
            </Nav>
            </Navbar.Collapse>
        </Container>
    </Navbar>
);

}

export default OptionMenu;

我对其他 stackoverflow 的问题进行了大量研究，发现 Browser Router 有一个主要冗余，但我不想更改我的 App.js p>

这是我的 App.js 文件：

import {Switch, Route,BrowserRouter } from "react-router-dom";
import CarList from "./components/carList";
import CarDetails from "./components/carDetails";
import React, { Component } from 'react'

export class App extends Component {
  render(){
    return (
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={CarList}></Route>
          <Route exact path="/details/:parameter" component={CarDetails}></Route>
        </Switch>
      </BrowserRouter>
    );
  }
}

export default App;

为了我们的帮助，这是我的依赖版本：

“引导程序”：“^5.1.3”,
“反应”：“^17.0.2”，
"react-bootstrap": "^2.1.1",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
“反应脚本”：“5.0.0”，
“网络生命”：“^2.1.3”

据您所知，我尝试使用 useNavigate()（更改我的 react-router-dom 的版本）

【问题讨论】：

标签： reactjs react-hooks react-router-dom

【解决方案1】：

OptionMenu 需要一个路由上下文才能有一个定义的history 对象返回。确保在 BrowserRouter 中呈现菜单。

例子：

<BrowserRouter>
  <OptionMenu />
  <Switch>
    <Route exact path="/" component={CarList}></Route>
    <Route
      exact
      path="/details/:parameter"
      component={CarDetails}
    ></Route>
  </Switch>
</BrowserRouter>

【讨论】：