How do I use multiple navbars in my react application

Question

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

Brian Thompson · Answer 1 · 2023-01-16T14:41:32.003

0

If you're using react router you shouldn't be using window.location directly anymore. Use the values available from react router. window.location changes won't trigger a re-render which is why you aren't seeing your changes.

The react router equivalent would be to use the useLocation hook

edited Jan 16 '23 at 14:41

answered Jan 16 '23 at 14:40

Brian Thompson

13,263
4
23
43

What props exactly? – AlaaKudo810 Jan 16 '23 at 14:41
The location is available from react-router's context with the useLocation hook – Brian Thompson Jan 16 '23 at 14:42
The other option would be to render the navbar as a child of each route you define instead of switching based on the location value. – Brian Thompson Jan 16 '23 at 14:43
1

I thought about something like that but i wanted to leave it as the last way to do it, i'll look into the useLocation hook – AlaaKudo810 Jan 16 '23 at 14:48

score 0 · Accepted Answer · answered Jan 16 '23 at 14:41

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 ...
}

How do I use multiple navbars in my react application

2 Answers2