Как использовать match.params.id в реагирующем маршрутизаторе v6

Ошибка: Uncaught TypeError: невозможно прочитать свойства неопределенного (чтение «путь») в matchPath (utils.ts:622:1)

useEffect(() => {
    const fetching = async () => {
      const { data } = await axios.get(`/api/notes/${match.params.id}`);

      setTitle(data.title);
      setContent(data.content);
      setCategory(data.category);
      setDate(data.updatedAt);
    };

    fetching();
  }, [match.params.id, date]);

Это поможет ?

KcH 19.11.2022 18:52

Если ошибка связана с чтением «пути» в утилите matchPath, почему вы спрашиваете о match.params.id? Можете ли вы отредактировать сообщение, чтобы включить полное сообщение об ошибке и сопутствующую трассировку стека кода? Более полный минимально воспроизводимый пример также был бы полезен, чтобы увидеть, что происходит с этим кодом и кодом, который, возможно, генерирует ошибку. Кроме того, будьте осторожны с использованием date в качестве зависимости, поскольку вы обновляете это состояние в эффекте.

Drew Reese 22.11.2022 11:37
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
В этом руководстве вы узнаете, как использовать API парсинга квитанций за 5 минут с помощью JavaScript. Eden AI предоставляет простой и удобный для...
Хук useOnClickOutside в ReactJS
Хук useOnClickOutside в ReactJS
Как разработчик ReactJS, вы, возможно, сталкивались с ситуацией, когда вам нужно закрыть модальное или выпадающее меню, когда кто-то щелкает за его...
Хуки (часть-2) - useEffect
Хуки (часть-2) - useEffect
Хук useEffect - один из самых мощных и универсальных инструментов в арсенале разработчика React. Он позволяет вам управлять побочными эффектами в...
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
В предыдущем посте я показал вам на примерах, как писать базовые тесты в React. Важнейшей частью пользовательского интерфейса приложений является...
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
Создайте титры как в звездных войнах с помощью CSS и Javascript
Создайте титры как в звездных войнах с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
0
2
105
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используйте useParams() из react-router-dom

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

const Component =()=>{
  const { id } = useParams();

  useEffect(() => {
    const fetching = async () => {
      const { data } = await axios.get(`/api/notes/${id}`);

      setTitle(data.title);
      setContent(data.content);
      setCategory(data.category);
      setDate(data.updatedAt);
    };

    fetching();
  }, [id, date]);
}


В вашем маршруте

<Route exact path = "/user/:id" element = {<Component />} />

Хе братан ты супер спасибо большое братан продолжай расти Тарун Бишт

Rohan Ghosh 19.11.2022 19:13

Другие вопросы по теме