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

Question

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

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

这是我试图实现的示例 url：

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

如您所见，我正在尝试发送多个查询字符串。在确认用户中，我读取了查询字符串，如下所示：

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

但是，我什至没有被定向到此组件，并且似乎 react 无法正确路由到该页面。知道吗？

Answer 1

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

import * as queryString from 'query-string';
..
const WrappedConfirmUser = () => {
  const {confirmation_code, username} = queryString.parse(location.search);
  return <ConfirmUser confirmation_code={confirmation_code} username={username}/>;
}

Answer 2

您正在尝试将搜索参数映射到路径段？

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

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

如果您仍然想读取搜索参数，您可以从 this.props.location.search 访问它们，但 React-router 不会将它们与您匹配到路由。

Answer 3

您的路径与您的网址不匹配。

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

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

{props.match.params.confirmation_code}

{props.match.params.username}