React useParams возвращает значение undefined

Я пишу приложение React. Мне нужно захватить параметры URL-адреса, используя useParams().

Ниже приведен соответствующий код:

import { BrowserRouter as Router, Route, Routes , useParams} from 'react-router-dom';

function App() {
  const {id} = useParams();
  console.info(id)
  };

  return (
    <Router>
      <Routes>
        <Route path = ":id" element = {<Form/>} >
        </Route>
      </Routes>
    </Router>
  );
}

export default App;

Однако console.info возвращает неопределенное значение. Есть предположения?

я тоже пробовал

const id = useParams(); // did not destructure id

и я пытался

<Route path = "/:id" element = {<Form/>} > //added forward slash before :id

Когда я нахожусь на localhost:3000/xhyz1, ожидаемый вывод console.info равен xhyz1.

javascript reactjs url

13.12.2022 09:05

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Не удается получить доступ к идентификатору в компоненте app, поскольку маршрут установлен для компонента form.

Переместите параметр использования внутри компонента формы

function Form() {     

    const {id} = useParams();

13.12.2022 09:07

При использовании useParams вы должны сопоставить деструктуру const {id} = useParams(); с вашим путем "/path/:id".

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

export default function fn() {
    const { id } = useParams();
    console.info("this.context:",  id )

    return (
      <div className = "....">
        {/* render something based on id */}
      </div>
    )
}

13.12.2022 09:16

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

Попытка добавить значки в таблицу пользовательского интерфейса материалов

Tailwind устанавливается как зависимость от разработчиков, а не как зависимость

Не могу ввести в поле ввода с помощью React

Изменение внутреннего состояния Popover — безголовый пользовательский интерфейс

Почему я получаю значение NaN в реакции?

Chart js Невозможно изменить ширину и высоту точки метки

Как отправить действие изменения в поле ввода

Компонент изображения для Mui CardMedia

Реагировать на useState и даты с вводом текста

Функция асинхронного обещания не работает в NextJS

React useParams возвращает значение undefined

Ответы 2

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

Похожие вопросы