React Navbar pathname doesn't render properly on page change? - reactjs

Question

So I'm trying to update my navbar background based on the page I am on, but when I console.log the window.location.pathname, it doesn't show the pathname properly.
Here is my function to change the navbar state based on the pathname
const [navbar, setNavbar] = useState(false)
const updateNavbar = () => {
if (window.location.pathname !== "/") {
setNavbar(true)
} else {
setNavbar(false)
}
console.log(window.location.pathname)
}
Here's my styled component
const Nav = styled.nav`
background: ${({ navbar }) => (navbar ? "red" : "blue")};
Then I pass this into my JSX
<Nav navbar={navbar}>
{menuData.map((item, index) => (
<NavLink to={item.link} key={index} onClick={updateNavbar}>
{item.title}
</NavLink>
))}
The issue is that if I click on my about menu item, in the console it shows
/
then if I click about again, then it shows
/about
So when I click about it changes the page visually on my screen, but the console logs /, so in order for the navbar to change colors, I have to click about again, which makes no sense. I pretty much have to click it twice to update the color.
Why doesn't the window.location.pathname automatically update to the page I am on instead of showing the previous link I clicked, then only after I click the link again it shows the correct path?
Also, I am using Gatsby JS and have AOS animations, but I don't think that matters.
Update: If I pass it into a useEffect hook, it shows / then /about, but why doesn't it only show me /about instead of showing both the previous and new link I clicked?
useEffect(() => {
updateNavbar()
}, [])

Answer 1

Your console print before your route is rendering!
So you can use:
setTimeout(function(){ console.log(window.location.pathname) }, 3000);
to print or get the path after your route change.

Answer 2

I suspect that code isn't working because you are setting your onClick function at the same time that it navigates to another page. What could work for you could be:
const updateNavbar = (destination) => {
if (typeof window !== 'undefined' && window.location.pathname !== "/") {
setNavbar(true)
navigate("destination")
} else if(typeof window !== 'undefined') {
setNavbar(false)
navigate("/")
}
console.log(window.location.pathname)
}
<NavLink key={index} onClick={updateNavbar(item.link)}>
{item.title}
</NavLink>
Basically, you are preventing the code to navigate to your page before it set the state. Changing the native to prop to navigate function.
Another workaround that may work for you is using the state from Gatsby <Link> component:
<Link
to={`/your/page`}
state={{ navbar: true }}
>
You can retrieve the value using: props.location.state.navbar.
I've added it to give you an approach. On the other hand, the code above will break in the build mode (gatsby build) since you are using window (a global object) and, since gatsby build occurs in the server, where there's no window, it will break the compilation. You should wrap every usage of window inside:
if (typeof window !== `undefined`) {
// your stuff
}
However, there's a more native approach. Since Gatsby extends from React (and from #react/router) it exposes at the top-level component (pages) a prop named location with all your desired information. Of course, you can pass downside from the page component to any atomized component to use it.
After some trials and errors we solved the issue by:
const updateNavbar = () => {
if (window.location.pathname !== "/") {
setNavbar(true)
} else {
setNavbar(false)
}
}
useEffect(() => {
if (window.location.pathname) {
setNavbar(window.location.pathname)
}
console.log(window.location.pathname)
}, [])
background: ${({ navbar }) => (navbar != "/" ? "#000" : "transparent")};