React main page is not loading - reactjs

Question

I'm trying to develop an online shop in React. Trying to load app.js. I don't get any errors, just a blank page.
App.js as follows:
import AppRouter from "./components/AppRouter";
import NavBar from "./components/NavBar";
const App = observer(() => {
const {user} = useContext(Context)
const [loading, setLoading] = useState(true)
useEffect(() => {
check().then(data => {
user.setUser(true)
user.setIsAuth(true)
}).finally(() => setLoading(false))
}, [])
if (loading) {
return <Spinner animation={"grow"}/>
}
return (
<BrowserRouter>
<NavBar />
<AppRouter />
</BrowserRouter>
);
});
export default App;
NavBar.js as follows:
import {NavLink, useNavigate} from "react-router-dom";
import {ADMIN_ROUTE, LOGIN_ROUTE, SHOP_ROUTE} from "../utils/consts";
const NavBar = observer(() => {
const {user} = useContext(Context)
const navigate = useNavigate()
const logOut = () => {
user.setUser({})
user.setIsAuth(false)
}
return (
<Navbar bg="dark" variant="dark">
<Container>
<NavLink style={{color:'white'}} onClick={SHOP_ROUTE}>Victoria's Tech Store
</NavLink>
{user.isAuth ?
<Nav className="ml-auto" style={{color: 'white'}}>
<Button
variant={"outline-light"}
onClick={() => navigate.push(ADMIN_ROUTE)}
>
Admin
</Button>
<Button
variant={"outline-light"}
onClick={() => logOut()}
className="ml-2"
>
Logout
</Button>
</Nav>
:
<Nav className="ml-auto" style={{color: 'white'}}>
<Button variant={"outline-light"} onClick={() => (LOGIN_ROUTE)}>Login</Button>
</Nav>
}
</Container>
</Navbar>
);
});
export default NavBar;
AppRouter.js as follows:
import React, {useContext} from 'react';
import {BrowserRouter as Routes, Route, Router, useNavigate} from 'react-router-dom'
import {SHOP_ROUTE} from "../utils/consts";
const AppRouter = observer(() => {
const {user} = useContext(Context);
const Navigate = useNavigate();
console.log(user)
return (
<Router>
<Routes>
{user.isAuth && authRoutes.map(({path, Element}) =>
<Route key={path} path={path} element={Element} exact/>
)}
{publicRoutes.map(({path, Element}) =>
<Route key={path} path={path} element={Element} exact/>
)}
<Navigate to={SHOP_ROUTE}/>
</Routes>
</Router>
);
});
export default AppRouter;

Answer 1

Look in the browser console for any error messages, maybe what's causing the issue is some content that isn't being loaded like a file not imported or something along those lines.