Параметры react-router-dom v6 только числа

Я хочу добавить числовое регулярное выражение в параметр may в react-router-dom v6. это работает плавно в v5, как это:

 <Route path = "list/:id(\d+)" element = {<MyComponent/>} /> 

но это не работает в v6.

почему бы вам не передать это регулярное выражение вашему MyComponent через реквизит?

Amr 07.05.2022 08:20

@Amr, я хочу, чтобы он работал как маршрут

foad abdollahi 07.05.2022 08:23
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
2
29
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Регулярные выражения не поддерживаются в react-router-dom@6.

См. Что случилось с путями маршрутов регулярных выражений?

Regexp route paths were removed for two reasons:

  1. Regular expression paths in routes raised a lot of questions for v6's ranked route matching. How do you rank a regex?

  2. We were able to shed an entire dependency (path-to-regexp) and cut the package weight sent to your user's browser significantly. If it were added back, it would represent 1/3 of React Router's page weight!

Вы можете использовать хук useParams и протестировать параметр id в компоненте.

Пример:

import { useParams, useNavigate } from 'react-router-dom';

const MyComponent = () => {
  const { id } = useParams();
  const navigate = useNavigate();

  useEffect(() => {
    if (!/\d+/.test(id)) {
      navigate(-1);
    }
  }, [id, navigate]);

  ...
};

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