如何从没有跟随序列的反应路由器获取选项参数值（React Router v4）

Question

我必须从反应路由器（React Router v4）访问可选参数的值。现在问题在于我们避免了param（s）序列。例如，根据以下反应路由器代码，我们必须访问pathPraram2而不定义pathPram1：

<Route path="/to/page/:pathParam1?/:pathParam2?" component={MyPage} />

Answer 1

您可以使用withRouter（或本地路由器）中的react-router-dom hoc。

这会将一些路由道具传递给您的组件。

如果您想要：flow验证它：

type PropType = {
  match: {
    params: {
      pathParam1?: string, // '?' to emphasize its optional 
      pathParam2?: string,
    },
  },
};

在您的组件中，您可以通过简单地检查它们的存在来使用它们。

if (this.props.params && this.props.params.pathParam1) {
  // do something
}

我希望这有帮助。

withRouter：https://reacttraining.com/react-router/native/api/withRouter

另外，延伸@Shubham的答案，我建议使用带有标识符的这些可选参数。

例：

http://example.com/page/identifier-1/param-1/identifier-2/param-2
http://example.com/page/identifier-2/param-2
http://example.com/page

这样您就可以根据页面定义路径，并且在组件中，您可以根据路由包含的参数标识符进行检查。

对于像这样的params的路线：

{
  articleId: 'abc',
  commentId: 'xyz'
}

要创建上面提到的路线：

<Route path="/page/:key1?/:value1?/:key2?/:value2?" component={MyPage} />

现在访问组件中的这些：

if (!this.props.match || !this.props.match.params) {
  return;
}

let articleId = null;
let commentId = null;

if (
  this.props.match.params.key1 &&
  this.props.match.params.value1
) {
  if (this.props.match.params.key1 === 'articleId') {
    articleId = this.props.match.params.value1;
  }
  if (this.props.match.params.key1 === 'commentId') {
    commentId = this.props.match.params.value1;
  }
}

if (
  this.props.match.params.key2 &&
  this.props.match.params.value2
) {
  if (this.props.match.params.key2 === 'articleId') {
    articleId = this.props.match.params.value2;
  }
  if (this.props.match.params.key2 === 'commentId') {
    commentId = this.props.match.params.value2;
  }
}

然后只需简单检查articleId或commentId是否为空。

我认为这会导致更好的url形成，尽管它会增加组件内部的条件以获取参数。

然而，在Shubham的回答中，你将有更少的条件和不同的网址形成。您可以根据自己的使用情况决定哪一个更适合您使用。

希望能帮助到你。

Answer 2

路由器不能直接在另一个之前直接拥有可选的路径参数

考虑这个案子

<Route path="/to/page/:pathParam1?/:pathParam2?" component={MyPage} />

现在说你希望有pathParam1而不是pathParam2，所以你的路径路径就是

/to/page/pathpage1

现在考虑另一种情况，当pathParam1没有传递但pathParam2是，所以路径路径看起来像

/to/page//pathpage2

现在这里pathParam1将匹配为空，而pathParam2将匹配pathpage2将工作，你可以访问它像this.props.match.pathparam2

但它的网址不干净，因为它包含两个//。更好的方法是在params之间引入固定路径

<Route path="/to/page(/:pathParam1?)/somepath(/:pathParam2)?" component={MyPage} />