Question

我有这个。它与文档中所说的完全相同。我认为react-router-dom模块很好，因为在其他组件中，BrowserRouter，Router和Link对我有用

import { useHistory } from "react-router-dom"
import React from 'react'

export default function HomeButton() {
  let history = useHistory()

  function handleClick() {
    history.push("/home")
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

当我单击按钮时会发生

TypeError：无法读取未定义的属性“ push”

我是reactjs的新手，请帮忙，谢谢

Answer 1

这是因为未在该组件中设置react-router上下文。由于其<Router>组件可以设置上下文，因此您可以在子组件中使用useHistory，但不要在子组件中使用。
从其中导入其中之一（Router和useHistory钩子）时可能引发相同的错误 react-router和另一个来自react-router-dom和包这些软件包的版本不匹配。不要同时使用它们，

Answer 2

您在使用 useHistory 的同一组件中使用 <Router>...</Router> 将路由器添加到 DOM。

useHistory 仅适用于子组件，但不适用于父组件或组件本身。

您必须将组件的 <Router>...</Router> 包装上移一级。你可以在 app.js 中做到这一点：

App.js



import { BrowserRouter as Router } from 'react-router-dom'; 

function App() {
  return (
    <Router>
      <div className="App">
      </div>
    </Router>
  );
}

export default App;

component.js


import React from'react';
import {useHistory, withRouter } from "react-router-dom";


export default function HomeButton() {
  let history = useHistory()

  function handleClick() {
    history.push("/home")
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

export default withRouter(HomeButton);

这对我有用。

React-Router：为什么在react中未定义useHistory？

2 个答案: