Использование параметров по умолчанию в DOM React Router для динамической маршрутизации

Что касается параметров по умолчанию React Router DOM, вы можете использовать несколько методов:

  1. Свойства компонента маршрута: React Router DOM предоставляет компонент Route, который отображает компонент, когда URL-адрес соответствует определенному пути. Отображаемый компонент получает реквизиты, включающие match, locationи историю. Свойство matchсодержит информацию о совпадающем URL-адресе, включая параметры.

  2. Хук useParams: React Router DOM также предоставляет хук useParams, который позволяет вам получить доступ к параметрам, определенным в URL-адресе. Используя этот крючок, вы можете извлекать и использовать параметры по умолчанию непосредственно в своих функциональных компонентах.

Вот пример использования параметров по умолчанию с DOM React Router:

import { BrowserRouter as Router, Route, Switch, useParams } from 'react-router-dom';
const MyComponent = () => {
  const { id } = useParams();

  // Use the 'id' parameter in your component logic

  return (
    <div>
      <h1>Component with default parameter: {id}</h1>
    </div>
  );
};
const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/component/:id" component={MyComponent} />
      </Switch>
    </Router>
  );
};
export default App;

В этом примере параметр idопределен в URL-пути (/comComponent/:id). При совпадении URL-адреса типа /comComponent/123компонент MyComponentбудет отображаться, а параметр idбудет доступен через >useParamsхук.