Почему react router не видит айдишник в урле?

React Router не видит айдишник в урле, скорее всего, из-за неправильного настройки или использования компонента BrowserRouter или HashRouter.

Первым делом убедитесь, что вы правильно импортировали и настроили BrowserRouter или HashRouter в вашем приложении.

BrowserRouter использует историю HTML5 для изменения URL без перезагрузки страницы. Он должен быть обернут вокруг вашего корневого компонента приложения:

import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

HashRouter использует хеш-фрагмент в URL для навигации без перезагрузки страницы:

import { HashRouter } from 'react-router-dom';

ReactDOM.render(
  <HashRouter>
    <App />
  </HashRouter>,
  document.getElementById('root')
);

После этого убедитесь, что у вас настроены маршруты (Routes) с использованием компонента Route, и что пути (path) соответствуют ожидаемому URL-адресу, включая айдишник.

import { Route } from 'react-router-dom';

<Route path="/users/:id" component={UserDetails} />

В приведенном выше примере, путь "/users/:id" указывает, что после "/users/" должен идти динамический айдишник, который будет доступен в компоненте UserDetails через props.match.params.id.

В компоненте UserDetails вы должны использовать props.match.params.id для доступа к айдишнику в URL:

import React from 'react';

const UserDetails = (props) => {
  const { id } = props.match.params;

  return (
    <div>
      <h1>User Details</h1>
      <p>User ID: {id}</p>
    </div>
  );
}

export default UserDetails;

Если вы все правильно настроили, и React Router по-прежнему не видит айдишник в урле, проверьте, что вы используете версии пакетов react-router и react-router-dom, совместимые между собой. Версии пакетов могут иногда вызывать проблемы с синтаксисом и функциональностью React Router.

Наконец, проверьте, что вы правильно просматриваете айдишник в URL браузера. Некоторые символы, такие как слэш (/), требуют URL-кодирования. Вы можете использовать функцию encodeURIComponent() для кодирования айдишника перед его использованием в URL.

В общем, проблема с невидимым айдишником в урле может быть вызвана неправильной настройкой или использованием BrowserRouter или HashRouter, неправильными маршрутами или версиями пакетов react-router. Проверьте все это и убедитесь, что вы правильно используете айдишник в вашем коде.