Below is the code in my App.js:
import { useRecoilValue } from 'recoil';
import { authState } from './atoms/authAtom';
import { ToastContainer } from 'react-toastify';
import { ProtectedRoute } from './layout/ProtectedRoute';
import CourseDashboard from './features/course/CourseDashboard';
import { Route, Routes } from 'react-router-dom';
import NavBar from './features/nav/Navbar';
import { LoginPage } from './features/auth/LoginPage';
export const App = () => {
const authentication = useRecoilValue(authState)
return (
<>
<ToastContainer position='bottom-right' hideProgressBar />
<NavBar />
<Routes>
<Route path='/courses' element={
<ProtectedRoute user={authentication?.user} isAuthenticated={authentication?.isAuthenticated} redirectPath={'/login'}>
<CourseDashboard />
</ProtectedRoute>
} />
<Route path='/' element={
<ProtectedRoute user={authentication?.user} isAuthenticated={authentication?.isAuthenticated} redirectPath={'/login'}>
<CourseDashboard />
</ProtectedRoute>
} />
<Route path='/login' element={<LoginPage />} />
</Routes>
</>
)
}
This section pertains to index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { App } from './App';
import { RecoilRoot } from 'recoil';
import { BrowserRouter } from 'react-router-dom';
import 'semantic-ui-css/semantic.min.css'
import './styles.css'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<RecoilRoot>
<BrowserRouter>
<App />
</BrowserRouter>
</RecoilRoot>
</React.StrictMode>
);
I am utilizing Recoil for state management, Semantic UI React for styling, and React Router DOM v6 for routing.
The issue I'm facing is that the NavBar component renders at the top of the page, but components like CourseDashboard or LoginPage below it do not render.
https://i.stack.imgur.com/M8kQN.png
This is what my login page looks like:
import { Container, Form, Input, Text } from "semantic-ui-react";
export const LoginPage = () => {
return (
<>
<Form>
<Input name="email" type="email" placeholder="Enter Email" />
<Input name="password" placeholder="Enter Password" type="password" />
</Form>
</>
);
};
If I remove the Semantic UI part and just use basic HTML elements like this:
import { Container, Form, Input, Text } from "semantic-ui-react";
export const LoginPage = () => {
return (
<>
{/* <Form>
<Input name="email" type="email" placeholder="Enter Email" />
<Input name="password" placeholder="Enter Password" type="password" />
</Form> */}
<h1>login</h1>
</>
);
};
With the above change, it renders as expected:
https://i.stack.imgur.com/YdGs7.png
I've been troubleshooting for hours but couldn't find a solution. Can someone help? Thanks in advance.
Edit:
Considering a suggestion, upon checking the DOM it appears that the LoginPage component does render, but it's positioned behind the NavBar component even though they are separate. How can I separate them and have the LoginPage component render below the NavBar?
https://i.stack.imgur.com/hboaY.png
This is the NavBar Component:
import React from "react";
import { Menu, Container } from "semantic-ui-react";
import { useRecoilValue } from "recoil";
import { authState } from "../../atoms/authAtom";
import { NavLink } from "react-router-dom";
import { SignedInMenu } from "./SignedInMenu";
export default function NavBar() {
const authentication = useRecoilValue(authState);
console.log(authentication);
return (
<Menu inverted fixed="top">
<Container>
<Menu.Item as={NavLink} exact to="/" header>
<img
src="/assets/logo.jpg"
alt="logo"
style={{ marginRight: "15px" }}
/>
Bhaktivedanta Vedic Academy
</Menu.Item>
<Menu.Item name="Courses" as={NavLink} to="/courses" />
{authentication?.isAuthenticated && <SignedInMenu />}
</Container>
</Menu>
);
}