用许多参数来响应路由器查询字符串

Question

我有一个查询字符串，如下所示：

https://localhost:44399/historicalcomp?foo=4.047&bar=0.7982237280435869&baz=19.17%25

我的路线如下：

  <Switch>
    // ... many more routes here...
    <Route
      path={`${path}/historicalcomp/:foo/:bar/:baz`}
      component={() => <HistoricalComparison rightDrawer="rating" applicationId={match.params.id} />}
    />
    <Route render={({ match }) => <Redirect to={`${path.replace(":id", match.params.id)}/summary`} />} />
  </Switch>

我没有被发送到Historical路由，而是被发送到默认的摘要路由...

当我从Route和查询字符串中删除参数时，可以按这种方式打historicalcomp路由。但是我需要查询字符串。

这是我在另一个组件中定义链接的方式：

const getQueryString = () => {
  return new URLSearchParams({
    foo: props.foo,
    bar: props.bar,
    baz: props.baz
  }).toString();
};

我返回：

     <Link
        to={{
          pathname: "historicalcomp",
          search: getQueryString()
        }}
      >
        (view historicals)
      </Link>