Итак, я разрабатываю приложение в реакции и у меня есть реакция на маршрутизатор lib, чтобы в моем приложении отображались различные возможные URL-адреса. У меня есть следующее routes, определяющее, какой компонент будет отображаться в зависимости от URL:
<Route path={`/products/:address/:page`} component={Products} />
<Route path={`/products/:productId`} component={ProductDetails} />
<Route render={() => <NotFound/>}/>
1-й ожидает что-то вроде этого: /products/store/1, чтобы соответствовать продуктам и показывать страницу продуктов.
2-й ожидает что-то вроде этого: /products/5e996d123e1e0816242aed80 и показывает подробности продукта.
3-й является резервным интерфейсом, если ничего не соответствует
Моя проблема в том, что если я на 1-м URL и удаляю страницу (1), например, /products/store/, реагирующий маршрутизатор запутывается и пытается сопоставить 2-й маршрут.
В обоих компонентах я загружаю параметры в componentDidMount вот так: this.props.match.params.address, this.props.match.params.page для 1-го компонента и this.props.match.params.address для 2-го.
В идеале я хотел бы отобразить 3-й маршрут, если 2-й аргумент 1-го маршрута не настоящее.
Одним из возможных решений было бы изменить второй маршрут с /products/:productId на /product/:productId, чтобы он не запутался.
Есть ли лучшее решение для этого?