After integrating react-bootstrap with nextjs, I encountered a strange issue with the NavBar component. The problem arises when I first load the navbar - everything appears as expected,
https://i.stack.imgur.com/R9guE.png
but upon refreshing the page, CSS-related bugs start to occur,
https://i.stack.imgur.com/cTH1r.png
accompanied by errors in the console.
https://i.stack.imgur.com/e5kED.png
Here is a snippet of my code:
<Navbar collapseOnSelect expand="lg" bg="danger" variant="dark">
<Container>
<Link href="/" passHref>
<Navbar.Brand>Unique Technology</Navbar.Brand>
</Link>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
{auth.isLoggedIn && (
<>
<Nav className="me-auto">
<NavDropdown title="Users" id="collasible-nav-dropdown">
<Link href="/users/" passHref>
<NavDropdown.Item>Listing</NavDropdown.Item>
</Link>
<Link href="/users/create" passHref>
<NavDropdown.Item>New</NavDropdown.Item>
</Link>
</NavDropdown>
</Nav>
<Nav className={styles.center}>
<Navbar.Text>Welcome, {auth.user.name}</Navbar.Text>
<Nav.Link onClick={logoutHandler}>
<Button variant="outline-light">Logout</Button>
</Nav.Link>
</Nav>
</>
)}
{!auth.isLoggedIn && (
<Nav>
<Link href="/login" passHref>
<Nav.Link>
<Button variant="outline-light">Login</Button>
</Nav.Link>
</Link>
</Nav>
)}
</Navbar.Collapse>
</Container>
</Navbar>
Can anyone shed light on why this issue is occurring?
Edit: Code related to auth.isLoggedIn:
import { createContext, useState, ReactNode } from "react";
import { useRouter } from "next/router";
interface IAuthContext {
isLoggedIn: boolean;
token: string | null;
user: IUserData;
onLogout: () => void;
onLogin: (data: LoginData) => void;
}
// More code and explanation here...