Add param to current URL without reloading or redirecting with react router

Question

I want to add params to the current URL, for example if I do a query or I am looking from records 10 to 20 I just want the URL to reflect on that without reloading. For example: http://myurl/?q=searchworkd&min=10&results=10.

I having being searching for this but I am confused. All the examples usually talk about redirecting or adding new params and I dont if I should use history, browserHistory or hashHistory. All the

I'd recommend import {useHistory} from 'react-router-dom' and do something like history.push('/yoururl?results=20') — radihuq
– radihuq, Commented Nov 7, 2019 at 18:41

radihuq · Accepted Answer · 2019-11-07 18:46:36Z

3

You can import {useHistory} from 'react-router-dom and do this:

const history = useHistory();

// console.log(history);

const handleButtonClick = (e) => {
    let newResults = 20;
    history.push(`/?q=searchworkd&min=10&results=${newResults}`);
}

answered Nov 7, 2019 at 18:46

radihuq

1,08212 silver badges13 bronze badges

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

1 Comment

Fazwelington Over a year ago

how would I accomplish the same using react-router-dom-v6?

Nawaraj Bista · Accepted Answer · 2023-11-02 00:27:54Z

1

In a new version useHistory() does not work. Instead, use useNavigate function to accomplish desired result.

import {useNavigate} from "react-router-dom";

const navigate = useNavigate();


const handleButtonClick = (e) => {
let newResults = 20;
navigate(`/?q=searchworkd&min=10&results=${newResults}`);
}

answered Nov 2, 2023 at 0:27

Nawaraj Bista

4165 silver badges13 bronze badges

Collectives™ on Stack Overflow

Add param to current URL without reloading or redirecting with react router

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related