javascript - 有没有办法用问号路由路径？

Question

我正在定义我的路线

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

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

它会转到我的错误页面 View ，

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

我已尝试从 URL 中删除问号 (?) 并添加 [、]、$ 等字符，并且 URL 正在访问测试组件。

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

我将不胜感激。

Answer 1

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

之后，路由文件中的路由或您使用它们的任何地方应该如下所示:

<Route path="/test" component={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
}