web-dev-qa-db-ja.com

UseHistory、Uselocationフックを使用するための無効なフックコール

app.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>
  );
}
 _

display.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"
}
 _
reactjsreact-routerreact-hooks
5
Dharman Arjunan

カスタム履歴オブジェクトを指定せずに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>
  )
}
 _

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
 _
1
Shubham Khatri

私の場合私はReact要素を使用していましたReactコンポーネントは、useHistory（）フックがエラーを投げていた理由でした。

0
Sebastian Wrzalek

私は私のReactバージョンを16.14.0にダウングレードし、そして今は機能します。 React 17.0はReact-Router-Domで壊れているようです

0
Ymin Hu