Как воспользоваться useNavigate в React Router v6

Question

В React Router v6 убрали history и теперь надо пользоваться хуком useNavigate но он не работает в классах, нашёл решение создать свой withRouter в котором пытаюсь использовать useNavigate

import React, { Component} from "react";
import ItemList from "../itemList";
import ErrorMessage from "../errorMessage";
import gotService from "../../services/gotService";
import {useNavigate} from "react-router-dom"

const withRouter = WrappedComponent => props => {
    const navigate = useNavigate();

    return (
        <WrappedComponent
            {...props}
            onItemSelected={(book) => {navigate(book)}}
        />
    )
    
}

class BooksPage extends Component {

    gotService = new gotService();

    state = {
        error: false,
        pageNumber: 1,
        selectedItem: null,
     }
    
    componentDidCatch() {
        this.setState({
            error: true
        })
    }
    

    onNextPage = () => {
        this.setState((state) => {
            return{
                pageNumber: ++state.pageNumber
            }
            
        })
    }
    
    onPrevPage = () => {
        if (this.state.pageNumber <= 1) {
            return {
                pageNumber: 1
            }
        }

        this.setState((state) => {
            return {
                pageNumber: --state.pageNumber
            }
        })
    }

    render() {

        if (this.state.error) {
            return<ErrorMessage/>
        }

        return (
            <>
                <button onClick={() => this.onPrevPage()}>Prev</button>
                <button onClick={() => this.onNextPage()}>Next</button>
                <ItemList
                    pageNumber={this.state.pageNumber}
                    getData={this.gotService.getAllBooks}
                    renderItem={({name, released}) => `${name} (${released.slice(0, 4)})`}
                />
            </>    
        )
    }
}

export default withRouter(BooksPage);

но получаю ошибку

TypeError: this.props.onItemSelected is not a function

в itemList

  39 |     <Li
  40 |         key = {id}
  41 |         className="list-group-item"
> 42 |         onClick={() => this.props.onItemSelected(id)}>
     | ^  43 |         {label}
  44 |     </Li> 
  45 | )

вот сам itemList

import React, { Component } from 'react';
import styled from 'styled-components';
import Loading from '../loading';
const Li = styled.li`
    cursor: pointer;
`
export default class ItemList extends Component {

    state = {
        itemList: null
    }

    componentDidMount() {
        this.updateItemList()
    }

    updateItemList() {
        const { pageNumber } = this.props;
        const { getData } = this.props;

        getData(pageNumber)
            .then((itemList) => {
                this.setState({itemList})
            })
    }

    componentDidUpdate(prevProps) {
        if (this.props.pageNumber !== prevProps.pageNumber) {
            this.updateItemList()
        }
    }

    renderItems(arr) {
        return arr.map((item) => {

            const { id } = item;
            const label = this.props.renderItem(item)
            return (
                <Li
                    key = {id}
                    className="list-group-item"
                    onClick={() => this.props.onItemSelected(id)}>
                    {label}
                </Li> 
            )
        })
    }

render() {
    
    const {itemList} = this.state;

    if (!itemList) {
        return <Loading/>
    }

    const items = this.renderItems(itemList)

    return (
        <ul className="item-list list-group">
            {items}
        </ul>
    );
    }
}

БЛОГ НА HUSL

Как воспользоваться useNavigate в React Router v6

Ответы (0 шт):