How do I use multiple navbars in my react application

January 16, 2023

I’m trying to have a different navbar for each path in my website, i figured out a way but it doesn’t really change until I refresh the page which is obviously not what i want. ( I’m using react router v6.3 )

    function Navbar() {
if (window.location.pathname === "/") {
return (
<nav style={{ backgroundColor: "rgb(17, 105, 142)" }}>...</nav>
);
} else if (window.location.pathname === "/products") {
return (
<nav className="products-nav">...</nav>
);
} else if (window.location.pathname === "/addproducts") {
return (
<nav className="addproducts-nav">...</nav>
);
} else ...

Here‘s the full code just in case

>Solution :

You can use useLocation hook from react-router-dom which returns the current location object https://reactrouter.com/en/main/hooks/use-location

import React from 'react'
import useLocatio from 'react-router-dom'

const functionalComponent = () => {
    const location = useLocation();
    console.log(location.pathname)
    return ...
}