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

Question

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

Answer 1

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

如果你设置这样的路线：

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

你只定义了一个参数，所以即使你调用：

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

你只会得到type，因为路由只需要第一个参数（定义为: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"]