import { useHistory } from 'react-router-dom';
function Home() {
const history = useHistory();
return <button onClick={() => history.push('/profile')}>Profile</button>;
}import {useHistory} from "react-router-dom";
const history = useHistory();
<button onClick={() => history.goBack()}>Go Back</button>import { useLocation } from "react-router-dom";
function Locaions() {
let location = useLocation();
return (
<>
{location.pathname === "/Home" ?
"Hi i am at the homepage"
:
"d-none"
}
</>
);
}
import { useLocation } from 'react-router-dom'
// Location is, for example: http://localhost:3000/users/new
// Care! MyComponent must be inside Router to work
const MyComponent = () => {
const location = useLocation()
// location.pathname is '/users/new'
return <span>Path is: {location.pathname}</span>
}
export default MyComponent// 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>
)