省略一个可选参数，它在 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 使这成为可能，但我想保留 'path parameters'。

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

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

提前致谢

Answer 1

为什么不简单地添加第二个规则定义并将其粘贴在 <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 -> templateId with ruleId optional.

或者，您可以使用 render={} 道具而不是 component= 并编写您想要的内容，这样您就不必更改表单 guy[=] 的 API 17=]

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

Answer 2

尝试像 /templateID/:templateID?/ruleID/:ruleID?

这样的路径

有了 /templateID/1/ruleID/1，您将有 { params: { templateID:1, ruleID:1 }}

有了 /templateID/ruleID/1，您将有 { params: { ruleID:1 }}

route tester

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

Omitting an optional parameter, which is before another optional parameter in React Router

reactjs

react-router

react-router-dom