CODEWITHSUNDEEP
reactjsreact-router
Juan Diego
Juan Diego

Reputation: 1466

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

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

Upvotes: 1

Views: 3307

Answers (2)

Nawaraj Bista
Nawaraj Bista

Reputation: 416

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

Upvotes: 1

radihuq
radihuq

Reputation: 1082

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

Upvotes: 3

Related Questions