При обновлении страницы React Router V6 не видит динамически созданые роуты
Такая задача: человек переходит по ссылке (или обновляет страницу) к примеру ссылка /plan/123 и мы на неё переходим путём нажатия на элемент, с самой страницы идет GET запрос на сервер по уникальному номеру страницы (123). Роутинг выглядит примерно так
<Route path="/plan/* element={<Plan>}/>
если путь ставить path=/plan/${planID} то при обновлении страница не существует. Если оставить маршрут через * тогда выходит ошибка: from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request. Заголовок для запроса я добавлял 'Access-Control-Allow-Origin' : '*'
Есть нюанс что все работает на классовых компонентах и на них нужно этот функционал делать.
Ответы (1 шт):
<Route path="/plan/:value(или значение которое тебе нравиться)" element={<Plan />}/>
// это пропиши в компоненту в который указан в роуте (в данном случае ) если требуется получить значение
const {value (или твое значение которое ты подставил)} = useParams();
и уже давно пора не юзать классы (мы ведь не в 2016 году), не сегодня завтра у них поддрежка пропадёт.
Пропиши правильный ответ сервера:
вместо:
'Access-Control-Allow-Origin' : '*'
поставь:
'Access-Control-Allow-Origin' : 'http://localhost:твой порт' (на стороне бэка)