This is my home page:
When I refresh the page, it loads without any problems and the loading status changes from 'idle' to success and I can view the blogs without any problems.
However, when switching between pages, the visibility of blogs disappears.
import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { fetchBlogs } from '../store/blogSlice';
export default function ArticlesBlog() {
const bloglar = useSelector((state) => state.blog.blogs); // useSelector'ı bileşenin en üstünde çağırın
const blogdurum = useSelector((state) => state.blog.status);
const dispatch = useDispatch();
useEffect(() => {
// Eğer bloglar boşsa veya `status` loading ise fetch yap
if (bloglar.length === 0 || blogdurum === 'loading') {
dispatch(fetchBlogs());
}
}, [dispatch, bloglar, blogdurum]);
return (
<>
<section className="no-col-padding">
<div className="container-fluid">
<div className="content_container">
<div className="columns_wrap">
<div className="column_container column-1_1">
<div className="column-inner">
<div className="m_wrapper">
<div className="sc_blogger layout_classNameic_3 template_masonry margin_top_small sc_blogger_horizontal no_description sc_home-margin-type-h">
<h3 className="sc_blogger_title sc_item_title sc_item_title_without_descr">Blogdan Makaleler</h3>
<h6 className="sc_blogger_subtitle sc_item_subtitle">Blog</h6>
<div className="isotope_wrap" data-columns="3">
{blogdurum === 'loading' && <p>Loading...</p>}
{blogdurum === 'failed' && <p>Error fetching blogs</p>}
{blogdurum === 'ok' && (
<ul>
{bloglar.map((item) => (
<div key={item.id} className="isotope_item isotope_item_classNameic isotope_item_classNameic_3 isotope_column_3">
<div className="post_item post_item_classNameic post_item_classNameic_3 post_format_standard odd">
<div className="post_featured">
<div className="post_thumb" data-image={item.img} data-title={item.mindesc}>
<Link to={'blog/' + item.slug}>
<a className="hover_icon hover_icon_link" href="#">
<img className="post-image" alt={item.mindesc} src={item.img} />
</a>
</Link>
</div>
</div>
<div className="post_content isotope_item_content">
<div className="post_info">
<span className="post_info_item post_info_posted">
<a href="blog-standard-post.html" className="post_info_date">{item.date}</a>
</span>
</div>
<h5 className="post_title">
<a href="blog-standard-post.html">{item.mindesc}</a>
</h5>
<div className="post-info-bottom">
<div className="post_info">
<span className="post_info_item post_info_posted_by">By <a href="#" className="post_info_author">{item.author}</a></span>
<span className="post_info_item post_info_counters">
<a className="post_counters_item post_counters_comments" title="Comments - 3" href="#">
<span className="post_counters_number">{item.commentcount} yorum</span>
</a>
</span>
</div>
</div>
<div className="post_descr">
<p></p>
</div>
</div>
</div>
</div>
))}
</ul>
)}
</div>
<div className="sc_blogger_button sc_item_button"><Link to='/blogs'><a href="blog-masonry-3-columns.html" className="sc_button sc_button_square sc_button_style_filled sc_button_size_medium">Daha Fazla</a></Link></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</>
)
}
App.jsx
import React from 'react';
import { Routes, Route, useLocation } from "react-router-dom";
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import Footer from "./Components/Footer";
import Header from "./Components/Header";
import AboutUs from "./Pages/AboutUsPage";
import BlogsAll from "./Pages/BlogsAll";
import ContactPage from "./Pages/ContactPage";
import Main from "./Pages/Main";
import OurServices from "./Pages/OurServices";
import OurTeam from "./Pages/OurTeam";
import Portfolio from "./Pages/Portfolio";
import Shop from "./Pages/Shop";
import BlogDetail from './Pages/BlogDetail';
import ScrollToTop from './Components/ScrollToUp';
function App() {
const location = useLocation();
return (
<>
<Header />
<ScrollToTop/>
<TransitionGroup>
<CSSTransition
key={location.key}
classNames="fade"
timeout={300}
>
<Routes location={location}>
<Route path="/" element={<Main />} />
<Route path="/about-us" element={<AboutUs />} />
<Route path="/blogs" element={<BlogsAll />} />
<Route path="/blog/:id" element={<BlogDetail />} />
<Route path="/contact" element={<ContactPage />} />
<Route path="/our-services" element={<OurServices />} />
<Route path="/our-team" element={<OurTeam />} />
<Route path="/portfolio" element={<Portfolio />} />
<Route path="/shop" element={<Shop />} />
<Route path="*" element={<Main />} />
</Routes>
</CSSTransition>
</TransitionGroup>
<Footer />
</>
);
}
export default App;
I tried change useEffect but it with no success
In the useEffect hook, it will only run when the dependencies you passed are updated. Additionally, you can include pathname as a dependency to trigger the effect whenever the URL changes.
For Example:
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
function MyComponent() {
const { pathname } = useLocation();
useEffect(() => {
console.log('Pathname changed to:', location.pathname);
}, [pathname]);
return (
{/* your content*/}
);
}
export default MyComponent;