React：将查询字符串传递到路径中

Question

我正在尝试应用这篇文章中给出的答案 How to parse a query string in React Router

但它不起作用。

这是我的网址：

`/api/lexemes?searchTerm=${searchTerm}&optionValue=${optionValue}`

首先，当我运行此代码时没有任何显示：

let search = window.location.search;
let params = new URLSearchParams(search);
let foo = params.get('searchTerm');
console.log(foo);

这个也没有：

let url = this.props.location.search;
let params = queryString.parse(url);
console.log(params);

当我这样做时：

console.log(this.props);

控制台显示带有搜索=“”的位置

请注意，我使用的是类组件，它只适用于功能性组件吗？如果你能告诉我如何使用类组件来做到这一点，那就太好了。

我在 App.js 中的路径现在看起来像这样：

<Switch>
          <Route exact path="/" component={Main} />
          ...
</Switch>

我想要的是：

<Route exact path="/:search/:option" component={Main} />

这是我在 Main.js 中的 axios 调用

handleSubmit = (searchTerm, optionValue) => {
axios
  .get(`/api/lexemes?searchTerm=${searchTerm}&optionValue=${optionValue}`, {

  })
  .then(
    (res) => {
      if (Array.isArray(res.data) && res.data.length === 0) {
        this.setState({
          noData: 1,
        });
      } else {
        this.setState({
          words: res.data,
          currentScreen: "WordItem",
        });
      }

    },
    (error) => {
      alert("handleSubmit error " + error);
    }
  );

};

Answer 1

在这种情况下，如果你想使用

<Route exact path="/:search/:option" component={Main} />

这是 App.js 的代码

import React from "react";
import "./styles.css";
import { Switch, Route, BrowserRouter } from "react-router-dom";
import { Main } from "./Main";

export default function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/:search/:option" component={Main} />
      </Switch>
    </BrowserRouter>
  );
}

这是Main组件的代码：

import React, { Component } from "react";

class Main extends Component {
  render() {
    console.log("location match params", this.props.match.params);
    return <div>Home</div>;
  }
}

export { Main };

这是类组件，您可以从主组件访问参数。

代替

let url = this.props.location.search;
let params = queryString.parse(url);
console.log(params);

使用this.props.match.location 访问来自<Route exact path="/:search/:option" component={Main} /> 的参数