省略一个可选参数，它在 React Router 中的另一个可选参数之前

Question

我是 React 新手，如果我犯了错误，请原谅我 :)

我正在使用 React 路由器 dom 版本 4.2.2。

我正在我的BrowserRouter 中定义一条路径，如下所示：

<Route exact path="/my-base-url/myForm/:formMode/:templateID?/:ruleID?" component={MyFormComponent}/>

在MyFormComponent.jsx 中引用为：

let formMode = this.props.match.params.formMode;    
let templateID = this.props.match.params.templateID;
let ruleID = this.props.match.params.ruleID;

我的问题是，在templateID 不存在且仅 ruleID 存在的情况下，是否有可能省略templateID 并仅发送ruleID？ （以及如何阅读？）

我发现query-string 使这成为可能，但我想保留“路径参数”。

请注意，以下是我可能遇到的情况：

formMode     CREATE    EDIT    DELETE
---------------------------------------
templateID    yes       no       no
ruleID        no        yes      yes

提前致谢

Answer 1

试试/templateID/:templateID?/ruleID/:ruleID?这样的路径

使用/templateID/1/ruleID/1，您将拥有{ params: { templateID:1, ruleID:1 }}

使用/templateID/ruleID/1，您将拥有{ params: { ruleID:1 }}

route tester

Answer 2

为什么不简单地添加第二个规则定义并将其粘贴在 <Switch> 中：

<Route exact path="/my-base-url/myForm/:formMode/:ruleID?" component={MyFormComponent}/>

请注意，这是假设：

/my-base-url/myform/2 -> ruleId

/my-base-url/myform/1/2 -> templateId, ruleId

不能作为

/my-base-url/myform/1 -> 带有 ruleId 的 templateId 可选。

或者，您可以使用 render={} 属性而不是 component= 并编写您想要的内容，这样您就不必更改表单人的 API

<Route exact path="/my-base-url/myForm/:formMode/:templateID?/:ruleID?" 
    render={({match: { params }}) => params.templateId ? 
      <MyFormComponent templateId={params.templateId} : 
      <SomethingElse />
} />