如何获得React路由器v4中的所有参数

Question

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

我想从URL中得到整个param。URL可以是任意的，并且有任意数量的参数。

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

App.js

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

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上，它给出的是“类型”。我知道，因为我在/:view中定义了app.js，所以输出只是第一个param。但我想要完整的对词，即“类型/文章”。

Answer 1

反应路由器不是那样工作的。您使用需要的params设置一条路线，然后“this.props.match.params”为您获取所有的params。

如果你设定了这样的路线：

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

您只定义了一个param，所以即使您调用：

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

您只会得到type，因为路由只期望第一个param (定义为: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"]