Milind Daraniya

In this tutorial, we'll explore how to get query strings in React Router. Query strings are a way to pass data to a URL, commonly used in search functionality or passing parameters to a specific route. We'll walk you through the process of accessing and extracting query strings from the URL using React Router. Let's dive into this step-by-step guide!

Step 1: Set Up a New React Project 
If you don't have a React project yet, you can create one using Create React App (CRA). Open your terminal and run the following command:

npx create-react-app react-router-query-strings

Step 2: Install React Router 
Navigate to your project directory and install React Router by running:

npm install react-router-dom

Step 3: Create the Component with React Router 
Now, let's create a new component called QueryStringExample that will extract and display the query strings from the URL. Create a file named QueryStringExample.js in the src directory of your React project:

// src/QueryStringExample.js
import React from 'react';
import { useLocation } from 'react-router-dom';

const QueryStringExample = () => {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);

  return (
    <div>
      <h2>Query Strings in React Router</h2>
      <p>Query Parameter 1: {queryParams.get('param1')}</p>
      <p>Query Parameter 2: {queryParams.get('param2')}</p>
    </div>
  );
};

export default QueryStringExample;

Step 4: Set Up React Router 
Next, let's set up React Router in the App.js file. Open the App.js file in the src directory and update it as follows:

// src/App.js
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import QueryStringExample from './QueryStringExample';

function App() {
  return (
    <Router>
      <div>
        <h1>React Router Query Strings Example</h1>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/example?param1=value1&param2=value2">Query String Example</Link>
            </li>
          </ul>
        </nav>
        <Switch>
          <Route path="/example" component={QueryStringExample} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

Step 5: Test the Application 
Start your React development server by running the following command in your project's root directory:

npm start

Visit http://localhost:3000 in your web browser. You should see the "Home" and "Query String Example" links. Click on the "Query String Example" link, and the component QueryStringExample will be rendered, displaying the query parameters from the URL.

For example, if you clicked on the link http://localhost:3000/example?param1=value1&param2=value2, you should see the output:

Query Strings in React Router
Query Parameter 1: value1
Query Parameter 2: value2

Thanks