I had a question since I am very confused on why my code isn’t running at all. I am running my react webpage on mongoDB to store data, and using nodemon to run the page. So currently my issue is that I created a navbar in which is supposed to be able to see the loginpage once you run up the sevrer and I don’t see it at all. After creating dummy data, checking the DOM, i couldn’t figure out whats bugging my code.
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import HomePage from './Scene/homePage'; // Adjust the path as needed
import LoginPage from './Scene/loginPage'; // Adjust the path as needed
import ProfilePage from './Scene/profilePage'; // Adjust the path as needed
import { useMemo } from "react";
import { useSelector } from 'react-redux';
import { CssBaseline, ThemeProvider, createTheme } from '@mui/material';
import { themeSettings } from './theme';
function App() {
const mode = useSelector((state) => state.mode);
const theme = useMemo(() => createTheme(themeSettings(mode)), [mode]);
return (
<div className="app">
<BrowserRouter>
<ThemeProvider theme={theme}>
<CssBaseline />
<Routes>
<Route path="/" element={<LoginPage />} />
<Route path="/home" element={<HomePage />} />
<Route path="/profile/:userId" element={<ProfilePage />} />
</Routes>
</ThemeProvider>
</BrowserRouter>
</div>
);
}
export default App;
here is my app.js in wh9ich I defined all my paths
import { Box, Typography, useTheme, useMediaQuery } from "@mui/material";
import Form from "./form";
const LoginPage = () => {
const theme = useTheme();
const isNonMobileScreens = useMediaQuery("(min-width: 1000px)");
return (
<Box>
<Box
width="100%"
backgroundColor={theme.palette.background.alt}
p="1rem 6%"
textAlign="center"
>
<Typography fontWeight="bold" fontSize="32px" color="primary">
Sociopedia
</Typography>
</Box>
<Box
width={isNonMobileScreens ? "50%" : "93%"}
p="2rem"
m="2rem auto"
borderRadius="1.5rem"
backgroundColor={theme.palette.background.alt}
>
<Typography fontWeight="500" variant="h5" sx={{ mb: "1.5rem" }}>
Welcome to Blogit! Reinventing Blogging with style!
</Typography>
<Form />
</Box>
</Box>
);
};
export default LoginPage;
here is my index.jsx for my loginPage in which takes a form.
import { Box } from "@mui/material";
import Navbar from "Scene/navbar";
const HomePage = () => {
return (
<Box>
<Navbar />
</Box>
);
};
export default HomePage;
Here is the homepage.jsx in which is supposed to display my loginpage.
Microsoft Windows [Version 10.0.22631.2861]
(c) Microsoft Corporation. All rights reserved.
C:WindowsSystem32>cd C:UsersivatuDownloadsBlogiT
C:UsersivatuDownloadsBlogiT>dir
Volume in drive C is Windows-SSD
Volume Serial Number is FC6D-6677
Directory of C:UsersivatuDownloadsBlogiT
12/15/2023 09:14 PM <DIR> .
12/14/2023 10:23 PM <DIR> ..
12/15/2023 09:03 PM 15 .gitignore
12/14/2023 09:43 PM <DIR> client
12/07/2023 11:24 AM <DIR> node_modules
12/07/2023 11:24 AM 153,560 package-lock.json
12/07/2023 11:24 AM 226 package.json
12/08/2023 02:44 PM <DIR> server
3 File(s) 153,801 bytes
5 Dir(s) 26,916,519,936 bytes free
C:UsersivatuDownloadsBlogiT>cd client
C:UsersivatuDownloadsBlogiTclient>dir
Volume in drive C is Windows-SSD
Volume Serial Number is FC6D-6677
Directory of C:UsersivatuDownloadsBlogiTclient
12/14/2023 09:43 PM <DIR> .
12/15/2023 09:14 PM <DIR> ..
12/15/2023 09:01 PM 310 .gitignore
12/14/2023 12:28 PM 88 jsconfig.json
12/14/2023 03:13 PM <DIR> node_modules
12/14/2023 12:19 PM 732,866 package-lock.json
12/14/2023 12:18 PM 1,180 package.json
12/14/2023 03:11 PM <DIR> public
12/14/2023 11:44 AM 3,359 README.md
12/15/2023 03:30 PM <DIR> src
5 File(s) 737,803 bytes
5 Dir(s) 26,915,930,112 bytes free
C:UsersivatuDownloadsBlogiTclient>cd sec
The system cannot find the path specified.
C:UsersivatuDownloadsBlogiTclient>cd src
C:UsersivatuDownloadsBlogiTclientsrc>dir
Volume in drive C is Windows-SSD
Volume Serial Number is FC6D-6677
Directory of C:UsersivatuDownloadsBlogiTclientsrc
12/15/2023 03:30 PM <DIR> .
12/14/2023 09:43 PM <DIR> ..
12/15/2023 03:39 PM 1,049 App.js
12/14/2023 08:59 PM <DIR> components
12/14/2023 12:27 PM 187 index.css
12/14/2023 03:05 PM 901 index.js
12/14/2023 03:11 PM <DIR> Scene
12/15/2023 03:30 PM <DIR> state
12/14/2023 03:05 PM 2,972 theme.js
4 File(s) 5,109 bytes
5 Dir(s) 26,915,930,112 bytes free
C:UsersivatuDownloadsBlogiTclientsrc>cd Scene
C:UsersivatuDownloadsBlogiTclientsrcScene>dir
Volume in drive C is Windows-SSD
Volume Serial Number is FC6D-6677
Directory of C:UsersivatuDownloadsBlogiTclientsrcScene
12/14/2023 03:11 PM <DIR> .
12/15/2023 03:30 PM <DIR> ..
12/14/2023 03:11 PM <DIR> homePage
12/15/2023 02:38 PM <DIR> loginPage
12/14/2023 03:11 PM <DIR> navbar
12/14/2023 03:11 PM <DIR> profilePage
12/14/2023 12:35 PM <DIR> widgets
0 File(s) 0 bytes
7 Dir(s) 26,915,930,112 bytes free
C:UsersivatuDownloadsBlogiTclientsrcScene>
here is the file directory if you’re wondering.