TypeError: undefined is not an object (evaluating 'this.props.match.params')

Question

Я делаю квиз из нескольких тестов на React, а проблема такова: при запуске какого-либо из тестов, запускается функция componentDidMount(), мне нужно получать id конкретного теста, который хранится в this.props.match.params.id (если что, использую firebase):

async componentDidMount() {
        try {
            const response = await axios.get(`/quizes/${this.props.match.params.id}.json`);
            const quiz = response.data;
            this.setState({
                quiz, loading: false
            })
        } catch(error) {
            console.log(error);
        }
    }

Проблема в том, что насколько я это понимаю, в современном React обратиться к params можно только через хук useParams() в функциональном компоненте, а я использовал классовый, а переделывать всю логику не хотелось бы. Собственно вопрос: переделывать компонент в функциональный - действитель единственный выход для меня?

Answer 1

Предлагаю сделать функциональный враппер (помоему в миграции предлагалось на V6)

import React from "react";
import { useParams } from "react-router-dom";

const ElementWrapper = (props) => {
  // Component - ключ объекта, содержит нужный компонент
  const { Component, ...other } = props;
  
  const params = useParams();

  // инжектим параметры в пропсы как match объект
  return <Component {...{ ...other, match: { params } }} />;
};

export default ElementWrapper;

а в роуте оборачиваем им елемент/компонент

// {Component: Quize} - объект с компонентом, другие свойства этого объекта будут 
// переданы в этот компонент как пропсы
<Route exact path="/quizes/:id" element={<ElementWrapper {...{Component: Quize}} />} />

БЛОГ НА HUSL

TypeError: undefined is not an object (evaluating 'this.props.match.params')

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