使用 useHistory、useLocation 钩子的钩子调用无效

Question

应用程序.js：

import React from 'react';
import { Router, Route } from 'react-router-dom';
import Display from './Components/Display';

export function App() {
  return (
    <Router>
      <Route path="/" component={Display} />
    </Router>
  );
}

显示.js

import React from 'react';
import { Router, Route } from 'react-router-dom';
import Display from './Components/Display';

export function App() {
  return (
    <Router>
      <Route path="/" component={Display} />
    </Router>
  );
}

我在使用这些钩子时遇到了无效的钩子调用。

这是我的依赖项：

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

function History() {
  let history = useHistory(); // error saying invalid hook call
  let location = useLocation();
  console.log(history);
  return <h2>Hello Display</h2>;
}

export default History;

Answer 1

您正在使用react-router-dom中的路由器组件，而不提供自定义历史对象。

您可以使用 BrowserRouter 或提供自定义历史记录道具

import React from 'react';
import { BrowserRouter as Router, Route} from 'react-router-dom';
import Display from './Components/Display';

export  function App() {


  return (
    <Router>
        <Route path="/" component={Display } />
    <Router>
  )
}

显示.js

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

function History() {
    let history = useHistory();
    let location = useLocation();
    console.log(history)
    return<h2>Hello Display</h2>
}

export default History