Почему React Route с двумя необязательными параметрами не соответствует простому URL

Question

К вашему сведению, я использую React Router 5. В моем package.json есть следующая зависимость:

"response-router-dom": "^ 5.0.0",

[Вопрос отредактирован на более упрощенном примере]

Позвольте мне описать проблему, с которой я сталкиваюсь. Все следующие URL

http://localhost:3001/contact
http://localhost:3001/contact/
http://localhost:3001/contact/john50

соответствует следующему маршруту (с 1 необязательным параметром)

<Route path="/contact/:name([A-Za-z]+)?" component={Contact} />

JSfiddle для вышеуказанного поведения.

Затем я обновил вышеупомянутый маршрут, добавив еще один необязательный параметр age. Это выглядит так:

<Route path="/contact/:name([A-Za-z]+)?:age(\d{2})?" component={Contact} />

Почему этот новый обновленный маршрут с 2 необязательными параметрами соответствует этому URL:

http://localhost:3001/contact/

и не по этому URL:

http://localhost:3001/contact

Jsfiddle за это странное поведение

Почему? Может кто-нибудь объяснить?

Answer 1

Попробуйте это,

<Route path="/contact/:name?/:age?" component={Contact} />

Также см. это & это

Answer 2

Вы должны обернуть параметр вместе с / в необязательном регулярном выражении, заключив его в ()

<Route path="/about/:param1(\d{2}-\d{2}-\d{4})?/:param2(\.[A-Za-z]+)?" component={About} />

Примечание. Параметры должны быть разделены на /, которого у вас нет.Вы можете иметь свой маршрут как

<Route path="/about/:param1(\d{2}-\d{2}-\d{4})?/:param2(\.[A-Za-z]+)?" component={About} />

, и тогда ваши навигационные ссылки будут

const Navigation = () => (
    <ul className="navLinks">
      <li><NavLink  to="/">Home</NavLink></li>
      <li><NavLink to="/contact/john/50">Working Contact</NavLink></li>
      <li><NavLink to="/contact/">Contact With Slash</NavLink></li>
    <li><NavLink to="/contact">Contact Without Slash</NavLink></li>
    </ul>
);

Рабочая демонстрация