javascripthtmlcssreactjsrouter

Blog slider does not appear when changing pages React Javascript


This is my home page:

This is my 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.

this is same page

However, when switching between pages, the visibility of blogs disappears.

this is same page2

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


Solution

  • 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;