React: nav bar not rendering

[Advitya-sharma]

I have divided the nav component to two components , using pathname to render properly still its not rendering

import './Navbar.css'
import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';


const navbarManage = () => {
    return (
        <div>
            <ul>
                <li>
                    <NavLink to='/'><h1>LOGO</h1></NavLink>\
                </li>
            </ul>
        </div>
    )
}


const navbarDefault = () => {
    return (
        <ul>
                <li className="logout">
                    <NavLink to='/auth'><button>Logout</button></NavLink>
                </li >
                <li className="logo">
                    EVENT MANAGEMENT
             </li >
                <li className="make_events">
                    <NavLink to='/manageevent/makeevent'><button>Make Events</button></NavLink>
                </li>
        </ul>
    )
}



export class Navbar extends Component {

render() {

    let nav;

    if(window.location.pathname === '/'){
        console.log(window.location.pathname)
        nav = <navbarDefault/>;
    }
    else{
        console.log(window.location.pathname)   
        nav = <navbarManage/>;
    }

    return (
            <React.Fragment>
                 {nav}
            </React.Fragment>
           
        )
    }
}

export default Navbar;

[miku86]

What happens, when you:

• give the navbar component an uppercase name, e.g. <Navbar />
• add the conditional logic into {nav}

Next time, please add a codesandbox example.