react-router-dom useHistory returns 未定义

Question

在 react-router-dom v 5.2.0 中导入 useHistory returns“未定义”（甚至在 console.log() 中）

基本上我正在尝试构建一个选项菜单导航栏，让我 link 到另一条路线，例如主页。

这是我的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;

我研究了很多其他 Whosebug 的问题，我发现 Browser Router 有一个主要的冗余，但我不想改变我的 App.js

这是我的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;

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

"bootstrap": "^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”，
"web-vitals": "^2.1.3"

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

Answer 1

OptionMenu 需要一个路由上下文来定义一个指向 return 的 history 对象。确保您在 BrowserRouter.

中呈现菜单

示例：

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

react-router-dom useHistory returns 未定义

react-router-dom useHistory returns undefined

reactjs

react-router-dom

react-hooks