Question

我是React的新手，所以如果我犯了错误，请原谅我：）

我使用React router dom version 4.2.2。

我在TypeError: Cannot read property 'name' of undefined中定义了一条路径，如下所示：

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？（以及如何阅读？）

我发现query-string使这成为可能，但我想保留＆＃39;路径参数＆＃39;。

请注意，以下是我可能出现的情况：

ruleID

提前致谢

Answer 1

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

中

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

请注意，这假定：

/ my-base-url / myform / 2 - ＆gt; ruleId

/ my-base-url / myform / 1/2 - ＆gt; templateId，ruleId

不会像

那样工作

/ my-base-url / myform / 1 - ＆gt; templateId with ruleId optional。

或者，您可以使用render={}道具代替component=并撰写您想要的内容，这样您就不必更改格式家伙的API

<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中的另一个可选参数之前

2 个答案: