Breaking News: Grepper is joining You.com. Read the official announcement!

maintain query params react-router

Cautious Coyote answered on February 28, 2021 Popularity 10/10 Helpfulness 2/10

answer maintain query params react-router

related How to use query parameters in react router

maintain query params react-router

Comment

history.push('/app/measurements' + history.location.search)

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: github.com

Tags: javascript react-router

Link to this answer
Share Copy Link

Contributed on Feb 28 2021

Cautious Coyote

0 Answers Avg Quality 2/10

Closely Related Answers

How to use query parameters in react router

Comment

localhost:8080/users?name=shana

// In this url key is name and  value is shana

// We can pass query params to the Link component like this.

<Link to={{pathname:"/users",search: "?name=shana"}}>Shana</Link>

//or

<Link to="/users/?name=shana">Shana</Link>

//To access the query params from a url, we need to use the react router useLocation hook.
//Users.js

import React from 'react';
import {useLocation} from "react-router-dom";

function Users() {

  const location = useLocation();
  console.log(location);

  return (
    <div>
      <h1>Users page</h1>
      <p>{new URLSearchParams(location.search).get('name')}</p>
    </div>
  );
}

//In class-based components, we can access the query params using this.props.location object.

import React from 'react';

class Users extends React.Component{

  render(){
    const search = this.props.location.search;
    return <p>{new URLSearchParams(location.search).get('name')}</p>
  }
}

Popularity 10/10 Helpfulness 4/10 Language whatever

Source: reactgo.com

Tags: path

Link to this answer
Share Copy Link

Contributed on Apr 26 2023

iF n OnLy iF

0 Answers Avg Quality 2/10

maintain query params react-router

Contents

More Related Answers

maintain query params react-router

Closely Related Answers

How to use query parameters in react router

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.