Реагировать: передать строку запроса в путь

Question

Я пытаюсь применить ответ, данный в этом посте Как разобрать строку запроса в React Router

, но он не работает.

Это мой URL:

`/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);

Консоль показывает Location с поиском = ""

Обратите внимание, что я использую компоненты класса, она работает только с функциональными? Если бы вы могли сказать мне, как сделать это с классным компонентом, который был бы великолепен.

Мои пути в приложении. js теперь выглядят так:

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

Что бы я хотел иметь:

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

Это мой топор ios вызов в Main. js

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} />

Это код для приложения. 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 };

Это компонент класса, и у вас будет доступ к параметрам из компонента 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} />