为什么具有2个可选参数的React Route与简单URL不匹配

Question

仅供参考，我使用的是React Router 5.我的package.json中有以下依赖项：

“react-router-dom”：“^ 5.0.0”，

[用更简化的例子编辑的问题]

让我来描述一下我面临的问题。 以下所有网址

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

匹配以下路线（1个可选参数）

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

JS为上述行为提供了帮助。

然后，我通过添加另一个可选参数age来更新上面的Route。 它看起来像这样：

<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

你必须将param包含在()并将其包含在可选的正则表达式中/中

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

注意：Params需要由/你没有。 你可以像你的路线一样

<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>
);

工作演示

Answer 2

尝试这个，

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

另见这个和这个