reactjs - react-router-dom useHistory 返回未定义

Question

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

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

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

这是我的 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”，
• “ react ”:“^17.0.2”，
• "react-bootstrap": "^2.1.1",
• "react-dom": "^17.0.2",
• "react-router-dom": "^5.2.0",
• “ react 脚本”:“5.0.0”，
• "web-vitals": "^2.1.3"

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

Answer 1

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

例子:

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