React: pass a query string into a path

Question

I am trying to apply the answer given in this post How to parse a query string in React Router

but it's not working.

This is my url:

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

First, nothing shows when I run this code:

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

nor does this one:

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

When I do:

console.log(this.props);

The console shows Location with search= ""

Please note that I am using Class Components, does it work only with functional ones? If you could tell me how to do this with a class component that would be great.

My paths in App.js look like this now:

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

What I would like to have is:

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

This is my axios call in 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);
    }
  );

};

Wrap your component with withRouter HOC. You can then access the query string in your location prop — slumbergeist
– slumbergeist, Commented Apr 18, 2020 at 9:59

Adrian · Accepted Answer · 2020-04-18 12:31:18Z

0

In this case, if you want to use

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

This is the code for 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>
  );
}

This is the code for component 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 };

This is class component and you will have access to params from Main component.

Instead of

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

Use this.props.match.location to access params from <Route exact path="/:search/:option" component={Main} />

answered Apr 18, 2020 at 12:31

Adrian

9457 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

omar Over a year ago

Where do I put "this.props.match.location" inside App.js or in Main.js? And how will this affect the route Path?

Adrian Over a year ago

Inside Main.js. I left you Main.js code in the answer. Now in Main you can access to params. As you can see i left console.log to show you the values. This is the correct flow to access param url in React-router class component

omar Over a year ago

sorry for the dumb question again: but in Main.js there's only a console.log("location match params", this.props.match.params); return <div>Home</div>; I want to understand how logging the params will be passed into the Route in App.js

Adrian Over a year ago

Sorry but I don't understand very well. Do you want to know how to receive params in Main? If you want we can use chat to talk about the problem there

Adrian Over a year ago

I hope you understand after the chat. I will save code sandbox if you need something else :)

|

Collectives™ on Stack Overflow

React: pass a query string into a path

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related