Как перенаправить с неполного адреса на полный React Router
Есть страница товара /product которая обязательно должна иметь 3 параметра после себя, то есть /product/1/1/1, нужно сделать так что бы со страницы /product/544/ Перенаправило на /product/544/1/1
А со страницы /product/522/1 перенаправило на /product/522/1/1.
То что второй и третий параметр это однёрки, так и надо.
Моя попытка:
<Switch>
<Route path="/product/:product/:idType/:idSubType">
<Product />
</Route>
<Route path="/product/:product/:idType">
<Redirect to="/product/:product/:idType/1" />
</Route>
<Route path="/product/:product">
<Redirect to='/product/:product/1/1' />
</Route>
</Switch>
Проблема моего кода в том, что используя редирект он не знает параметры :product или :idType и просто вставляет текст, при том что он должен вставить те параметры которые получил от родителя!
Я новичок в React буду очень благодарен
Ответы (1 шт):
Для обращения к ресурсу, чтобы попасть на необходимый компонент, который требует некоторые параметры в адресной строке, нужно в адресной строке передать значения для этих параметров. Если необходимо выполнять своего рода редиректы, то можной пойти через путь наименьшего сопротивления, ведь параметры маршрутов могут быть необязательными. О чем идет речь, покажу на примере, есть следующий маршрут:
<Route path="/product/:product/:idType/:idSubType">
<Product />
</Route>
Здесь всё предельно ясно, при обращении к этому маршруту ему обязательно должны быть переданы значения для параметров product, idType и idSubType. Но вы можете отметить параметры как необязательные, указав в их определении знак вопроса, вот так:
<Route path="/product/:product/:idType?/:idSubType?">
<Product />
</Route>
Такая форма записи маршрута означает, что значения для параметров idType и idSubType - необязательны. После этого следующие маршруты будут вести на одну и ту же страницу:
/product/544/product/544/1/product/544/1/1
И вовсе не обязательно использовать Redirect в вашем случае и описывать несколкьо Route. Достаточно описать всего лишь один Route с необязательными параметрами. А уже внутри самого компонента Вы можете определить дополнительные условия, позволяющие понять, какой из параметров указан, ну и переопределить значение, если нужно.
Ссылка на полезный источник: React Router with optional path parameter