import { useHistory } from 'react-router-dom';
function Home() {
const history = useHistory();
return <button onClick={() => history.push('/profile')}>Profile</button>;
}In react-router-dom version 6
useHistory() is replaced by useNavigate() ;
import {useNavigate} from 'react-router-dom';
const navigate = useNavigate();
navigate('/home')import { useLocation } from "react-router-dom";
function Locaions() {
let location = useLocation();
return (
<>
{location.pathname === "/Home" ?
"Hi i am at the homepage"
:
"d-none"
}
</>
);
}
// React Router v6: hook returns current location object
import { useLocation } from 'react-router-dom'
function App() {
let location = useLocation()
useEffect(() => {
ga('send', 'pageview')
}, [location])
return (/*...*/)
}import React, { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
function CheckoutDetails() {
const location = useLocation();
const [amountValue, setAmountValue] = useState(1);
// function to get query params using URLSearchParams
useEffect(() => {
const searchParams = new URLSearchParams(location.search);
if (searchParams.has("amount")) {
const amount = searchParams.get("amount");
setAmountValue(parseInt(amount, 10));
} else {
setAmountValue(1);
}
}, [location]);
return (
<p>Amount: {amountValue}</p>
)