时间戳

首页 > 解决方案 > 如何在 React Router v4 中获取所有参数

reactjs - 如何在 React Router v4 中获取所有参数

问题描述

我正在尝试从 API 获取动态路由。当 URL 有参数时，我通过 API 请求发送它们并获取类型，并根据该类型呈现我的视图。

我想从 URL 获取整个参数。URL 可以是任意的并且具有任意数量的参数。

示例 URL：http://localhost:3000/type/article

应用程序.js

<Route path="/:view" component={LayoutPage} />

布局页面

componentDidMount() {
    this.doLoadView(this.props.match.params);
  }
  doLoadView(url) {
    this.setState({ url: url});
    console.log(url, 'match.params.view');
    this.props.actionLoad(url);
  }

在 match.params.view 上，它给出了“类型”。我知道，因为我在 app.js 中定义了 /:view，所以输出只是第一个参数。但我想要完整的参数，即“类型/文章”。

标签： reactjsecmascript-6

解决方案

React 路由器不是这样工作的。您使用所需的参数设置路线，然后“this.props.match.params”为您获取所有参数。

如果您设置这样的路线：

<Route path="/:view" component={LayoutPage} />

您只定义一个参数，因此即使您调用：

http://localhost:3000/type/article/myotherparam/andanotherparam/etc/etc2

你只会得到type，因为 Route 只需要第一个参数（定义为：view）。

如果要定义多个参数，请执行以下操作：

<Route path="/:view/:param2/:param3" component={LayoutPage} />

这样你就可以确保你有 3 个参数。

正则表达式和处理未知数量的参数

现在，由于我想您不知道会有多少参数，您可以使用正则表达式来匹配所有参数，但之后您需要进行一些解析。

因此，您可以将路线定义为：

<Route path="/:view+" component={LayoutPage} />

像这样称呼它：

http://localhost:3000/type/article/myotherparam/andanotherparam/etc/etc2

然后如果你登录：

console.log(JSON.stringify(this.props.match.params));

你会得到：

{"view":"type/article/myotherparam/andanotherparam/etc/etc2"}

然后，您可以按以下方式拆分/：

this.props.match.params.view.split('/')

您将获得参数数组：

["type","article","myotherparam","andanotherparam","etc","etc2"]

推荐阅读