Question

我正在定义路线

<Route path={['/test', '/test\\?foo=:id&bar=:id\\&zoo=:id']} component={Test} />

当我输入URL localhost:9000/test?foo=100&bar=100&zoo=100时，它没有被重定向到Test组件。我在componentDidMount（）中添加了console.log(this.props.location.search)，但它的输出为?foo=100&bar=100&zoo=100

这将进入我的“错误”页面视图，

<Route path="" component={ErrorPage} />

我试图从URL中删除问号（？），并添加了[，]，$之类的字符，并且URL击中了Test组件。

有什么办法，如果我输入URL = localhost:9000/test?foo=100&bar=100&zoo=100，我将被重定向到测试组件，而不是错误组件。

我会很感激。

Answer 1

您可以传递包含问号的path，但必须在组件内部而不是路径中解析它。您必须安装（或创建自己的）适当的工具来解析查询字符串。我建议您使用query-string。

之后，路由文件中的路由或无论您使用它们的位置都应如下所示：

<Route path="/test" component={Test} />

Test组件：

import React from 'react';
import queryString from 'query-string';

class Test extends React.Component {
  componentDidMount() {
    const { location: { search } } = this.props;
    const values = queryString.parse(search);
    // Use the values to whatever you want.
  }

  render() {
    {/* ... */}
  }
}

在上面的示例中，值将包含您的查询字符串参数，例如，如果URL是您提供的：localhost:9000/test?foo=100&bar=100&zoo=100，则值将是：

{
  foo: 100,
  bar: 100,
  zoo: 100
}

有什么方法可以带问号路由路径？

1 个答案: