I am using <Link/> from react-router-dom for navigation. And I wanted to switch the page at the curent level I am at, meaning to only change the last endpoint.
I have a url structure with the following hierarchy
/animals/cat
/animals/dog
And I wanted to go to dog while I am in the cat page using <Link/> and vice versa.
Is there an easier way to change only the last endpoint cat to dog when using link in the page?
I tried the following
This append /dog at the end of whatever url I am at
<Link to="./dog"> //leads to the url /cat/dog instead of /animals/dog
<Link to="dog"> //leads to the url /cat/dog instead of /animals/dog
And this replace everything on the url to /dog
<Link to="/dog"> //leads to the url /dog instead of /animals/dog
<Link to="../dog"> //leads to the url /dog instead of /animals/dog
Is there an easy way to do this on the Link component itself instead of using hooks or some other methods?
I ended up using the following hook
import {useLocation} from "react-router-dom";
const location = useLocation();
<Link to={useLocation().pathname + "/../dog"}/>
write if you have better solutions
umm Im Not sure if you want this or something else, all you gotta do is
<Link to="/animals/dog"/>