react-router-dom useHistory returns undefined-CodePudding

On react-router-dom v 5.2.0 the import of useHistory returns "undefined" (even in the console.log())

Basically i'm trying to build a optionMenu Navbar that let me link to another route, for example homepage.

This is my optionMenu.jsx File:

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;

I researched a lot in other stackoverflow's questions and i saw that Browser Router has a main redundance, but i'd like prefer not change my App.js

This is my App.js File:

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;

For our help this are my dependencies versions:

"bootstrap": "^5.1.3",
"react": "^17.0.2",
"react-bootstrap": "^2.1.1",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.3"

For your knowledgment i tried to use useNavigate() (changing my react-router-dom's version)

CodePudding user response：

OptionMenu needs a routing context to have a defined history object to return. Ensure you are rendering your menu within your BrowserRouter.

Example:

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