Question

我是新来的路由器。我使用react-router-dom 4.2.2 在我的路由器设置中我有：

<Route path={"/confirmuser/:confirmation_code/:username"} component={ConfirmUser} />

这是我想要实现的示例网址：

localhost:3003/confirmuser?confirmation_code=986797&username=5f1

如您所见，我正在尝试发送多个查询字符串。在confirmUser中我读了查询字符串如下：

    console.log(this.props.match.params.confirmation_code);
    console.log(this.props.match.params.username);

但是我甚至没有被定向到这个组件，似乎反应无法正确地路由到该页面。有什么想法吗？

Answer 1

您是否尝试将搜索参数映射到路径段？

您定义的路线将尝试匹配路径，而不是搜索参数。尝试： http://localhost:3003/confirmuser/986797/5f1 这些值将在this.props.match.params中，如下所示：

{
  confirmation_code: '986797',
  username: '5f1',
}

如果您仍想阅读搜索参数，可以从this.props.location.search访问它们，但是反应路由器将不会将它们与您的路线匹配。

Answer 2

您的路径与您的网址不符。

匹配localhost:3003/confirmuser/986797/5f1

然后你可以使用额外的道具match来访问参数：

{props.match.params.confirmation_code}

{props.match.params.username}

Answer 3

React-router v4不再解析查询字符串，因此您必须自己进行解析（不推荐），或使用像query-string这样的包。访问值的一种简单方法是使用包装器组件，如下所示：

import * as queryString from 'query-string';
..

const WrappedConfirmUser = () => {
  const {confirmation_code, username} = queryString.parse(location.search);
  return <ConfirmUser confirmation_code={confirmation_code} username={username}/>;
}

具有多个查询字符串的react-router-dom不起作用

3 个答案: