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

Posted 2021-05-05

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

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

示例网址：http://localhost:3000/type/article

App.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上，它给出了'type'。我知道因为我在app.js中定义了/：view所以输出只是第一个参数。但我想要完整的参数，即'type / article'。

答案

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"]