Having a bit of trouble with one of my pages on my react site. Whenever I try to reload the Home.js page via refreshing the browser, it shows up blank, but when I use the back navigation button in the browser, it works perfectly fine. I've searched most of the related listings on S.O. but nothing I've tried seems to work. Any help or advice would be greatly appreciated!
App.js
import React, { useContext, useEffect, Fragment } from 'react';
import logo from './logo.svg';
import './App.css';
import { Navigate, Route, Routes, Router, useLocation } from 'react-router-dom';
import LandingPage from './pages/LandingPage';
import 'bulma/css/bulma.min.css';
import BNavbar from './components/b-navbar';
import HomePage from './pages/Home';
import HomeDetailPage from './pages/HomeDetailPage';
import SellPage from './pages/SellPage';
import PropertyAddPage from './pages/PropertyAddPage';
import NetworkingPage from './pages/Networking';
import InvestorDetailPage from './pages/InvestorDetailPage';
import LenderDetailPage from './pages/LenderDetailPage';
import PhotographerDetailPage from './pages/PhotographerDetailPage';
import CheckEmailPage from './pages/CheckEmailPage';
import SignInPage from './pages/SignInPage';
import AboutUsPage from './pages/AboutUsPage';
import AlertBox from './components/b-alertbox';
import ForgotPassword from './pages/Forgot';
import EditProfilePage from './pages/EditProfilePage';
import ProfilePage from './pages/ProfilePage';
import { AuthContext } from './contexts/auth-context';
function App() {
const { isAuth, user, CheckAuthState, authLoading } = useContext(AuthContext);
useEffect(() => {
CheckAuthState()
}, [])
function AuthNavigator() {
return (
<Fragment>
<BNavbar user={null} />
<Routes>
<Route exact path="/" element={<LandingPage />} />
<Route path="/about-us" element={<AboutUsPage />} />
<Route path="/listings" element={<HomePage />} />
<Route path="/listings/:id" element={<HomeDetailPage />} />
<Route path="/signin" element={<SignInPage />} />
<Route path="/forgot" element={<ForgotPassword />} />
<Route path="/sell" element={<SellPage />} />
<Route path="/networking" element={<NetworkingPage />} />
<Route>{'404'}</Route>
</Routes>
<AlertBox />
</Fragment>
)
}
function MainNavigator({ user }) {
return (
<Fragment>
<BNavbar user={user} />
<Routes>
<Route exact path="/" element={<LandingPage />} />
<Route path="/listings" element={<HomePage />} />
<Route path="/listings/:id" element={<HomeDetailPage />} />
<Route path="/about-us" element={<AboutUsPage />} />
<Route path="/sell" element={<SellPage />} />
<Route path="/property-add" element={<PropertyAddPage />} />
<Route path="/networking" element={<NetworkingPage />} />
<Route path="/investor/:id" element={<InvestorDetailPage />} />
<Route path="/lender/:id" element={<LenderDetailPage />} />
<Route path="/photographer/:id" element={<PhotographerDetailPage />} />
<Route path="/check-email" element={<CheckEmailPage />} />
<Route path="/forgot" element={<ForgotPassword />} />
<Route path="/edit/profile" element={<EditProfilePage />} />
<Route path="/profile/:id" element={<ProfilePage />} />
<Route>{'404'}</Route>
</Routes>
<AlertBox />
</Fragment>
)
}
if (authLoading) {
return <progress className="progress is-small is-info" max="100">60%</progress>
}
return (
isAuth && !authLoading ?
<MainNavigator user={user} />
:
<AuthNavigator />
);
}
export default App;
Home.js
import React, { Fragment, useContext, useEffect, useState } from 'react';
import BSearchBar from '../components/b-searchbar';
import GMap from '../components/g-map';
import Home from '../components/Home';
import { DatabaseContext } from '../contexts/database-context';
import '../scss/pages/HomePage.scss'
function HomePage() {
document.title = 'Λcquired | Search for Properties for sale near you';
const [propertyListings, setPropertyListings] = useState([]);
const { listings, GetListing, selectedLocation } = useContext(DatabaseContext);
let location = localStorage.getItem('location');
location = JSON.parse(location);
const mapLocation = selectedLocation || location;
const [activeTab, setActiveTab] = useState(0);
const handleChangeIndex = (tab) => {
setActiveTab(tab)
}
const tabs = [
'Recently Listed',
'Recently Sold',
]
const getImages = (images) => {
return Object.values(images)
}
useEffect(() => {
if (listings.length > 0) {
setPropertyListings(listings);
}
}, [listings])
useEffect(() => {
GetListing()
}, [])
if (!listings) return null;
return (
<div className='home-page'>
<div className='home-page_bar'>
<div className='homeSearchBar'>
<BSearchBar className='search-container' isHome={true} navigationPath={'/listings'} placeholder='Enter an address, city, or ZIP code' />
</div>
<div className='homeToggle'>
<div className="tabs">
{
tabs.map((item, index) => {
return (
<li key={index} className={activeTab === index ? 'is-active' : ''} onClick={() => handleChangeIndex(index)}><a>{item}</a></li>
)
})
}
</div>
</div>
</div>
<div className='home-page-container'>
<div className='home-page-container_col-1'>
<GMap location={location} listing={propertyListings} />
</div>
<div className='home-page-container_col-2'>
{
activeTab === 0 &&
<div className='homes-container'>
{
propertyListings.filter(item => (item.price !== 'SOLD'))
.map((item, index) => {
return (
<div className='homes-container_item' key={index}>
<Home
isHighlighted={mapLocation?.address?.label === item.address}
address={item.address}
bathrooms={item.bathrooms}
bedrooms={item.bedrooms}
creationDate={item.creationDate}
description={item.description}
images={getImages(item.images)}
postKey={item.key}
latitude={parseFloat(item.latitude)}
longitude={parseFloat(item.longitude)}
postRef={item.postRef}
postUrl={item.postUrl}
poster={item.poster}
price={item.price}
rawPrice={item.rawPrice}
squareFeet={item.squareFeet}
view_Count={item.view_Count}
/>
</div>
)
})
}
</div>
}
{
activeTab === 1 &&
<div className='homes-container'>
{
propertyListings.filter(item => (item.price === 'SOLD'))
.map((item, index) => {
return (
<div className='homes-container_item' key={index}>
<Home
isHighlighted={mapLocation?.address?.label === item.address}
address={item.address}
bathrooms={item.bathrooms}
bedrooms={item.bedrooms}
creationDate={item.creationDate}
description={item.description}
images={getImages(item.images)}
postKey={item.key}
latitude={parseFloat(item.latitude)}
longitude={parseFloat(item.longitude)}
postRef={item.postRef}
postUrl={item.postUrl}
poster={item.poster}
price={item.price}
rawPrice={item.rawPrice}
squareFeet={item.squareFeet}
view_Count={item.view_Count}
/>
</div>
)
})
}
</div>
}
</div>
</div>
</div>
)
}
export default HomePage;