Неверный вызов ловушки для использования useHistory, ловушки useLocation - PullRequest
1 голос
/ 29 апреля 2020

Приложение. 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 { 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

Я сталкиваюсь с недопустимыми вызовами перехвата при использовании этих перехватчиков.

Это мои зависимости:

"dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "axios": "^0.19.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.0",
    "react-router": "^5.1.2",
    "react-scripts": "3.4.1",
    "redux": "^4.0.5"
  },

1 Ответ

0 голосов
/ 29 апреля 2020

Вы используете компонент Router изact-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>
  )
}

Display. 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
...