React useHistory: хуки могут вызываться только внутри тела компонента функции

Question

import 'bootstrap/dist/css/bootstrap.min.css';
import React, {Component}from 'react';
import {BrowserRouter, Route, Link} from 'react-router-dom';
import './App.css';

import {Home} from './Home';
import {About} from './About';
import {List} from './List';
import {Button} from 'reactstrap';

const App = () => {
  return(
  <BrowserRouter className = 'App'>
  
  <h1 className = 'App-header'>Welcome to To Do List</h1>

    <div>
      <ul>
        <>
        <Button outline color="secondary" size="sm" block><Link to='/' style={{color: 'black'}} >Home</Link></Button>{' '}
        <Button outline color="info" size="sm" block><Link to='/about' style={{color: 'black'}} >How to use</Link></Button>
        <Button outline color="success" size="sm" block><Link to='/friends'style={{color: 'black'}}>To do list</Link></Button>
        </>
      </ul>

      <hr/>

      <Route exact path = '/' component={Home} />
      <Route path = '/about' component={About} />
      <Route path = '/friends' component={List} />
      
    </div>
  </BrowserRouter>
  )
}



export default App

Я пытаюсь использовать Историю из «реакции-маршрутизатора». Тем не менее, похоже, что я продолжаю получать эту ошибку. Даже при том, что я пытался найти решения в Интернете, моя ошибка не похожа на «Правило прерывания хуков» и любую другую ошибку.

Есть ли способ решить проблему?

Я добавил свою Приложение js, а также

Спасибо

import React from 'react';
import './App.css';
import { useHistory } from 'react-router';
import {Button} from 'reactstrap';

const List = () => {

    const history = useHistory({});

    const handleOnClickLogin = () => {
        alert('login clicked');
        history.push('/');
      };

    return(
        <div className="list-component">
            <h2>To do list</h2>
            <Button color = "primary"
                    onClick={handleOnClickLogin}>
                Add
            </Button>
        </div>
    )
}

export default List;

Answer 1

Вы импортируете useHistory из реактивного маршрутизатора, но это функция из реактивного маршрутизатора, поэтому попробуйте выполнить импорт как

import { useHistory } from "react-router-dom";

Конечно, вам необходимо установить этот пакет, если его нет в вашем пакете. json файл. Дайте мне знать, если это работает.

Answer 2

Если импорт из "act-router-dom "не работает, попробуйте запустить npm install

$ npm install --save react-router-dom