React页面切换时Blog滑块不显示问题排查

• 首页加载后，Blog内容正常显示；刷新页面时，状态从idle变为success，可正常查看博客内容
• 切换到其他页面后再返回首页，Blog内容消失无法显示

ArticlesBlog组件 #

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);
    const blogdurum = useSelector((state) => state.blog.status);
    const dispatch = useDispatch();

    useEffect(() => {
        // 若博客列表为空或状态为loading时发起请求
        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;

1. 修复渲染逻辑，覆盖'idle'状态场景 #

当前仅在blogdurum === 'ok'时渲染博客列表，若页面切换后状态回到idle但博客数据仍存在，就会导致内容消失。修改渲染条件，增加对idle状态且数据存在的判断：

{(blogdurum === 'ok' || (blogdurum === 'idle' && bloglar.length > 0)) && (
  <ul>
    {/* 原有列表渲染代码 */}
  </ul>
)}

2. 优化useEffect触发条件 #

原useEffect依赖bloglar和blogdurum，可能导致不必要的重复请求或请求不触发。简化逻辑，仅在博客列表为空时发起请求：

useEffect(() => {
  if (bloglar.length === 0) {
    dispatch(fetchBlogs());
  }
}, [dispatch, bloglar.length]);

3. 修复HTML语义错误（嵌套a标签） #

代码中存在Link嵌套a标签的错误，这会导致路由行为异常且不符合HTML规范，需将嵌套的a标签替换为Link：

// 替换图片处的嵌套标签
<Link to={`blog/${item.slug}`} className="hover_icon hover_icon_link">
  <img className="post-image" alt={item.mindesc} src={item.img} />
</Link>

// 替换标题处的a标签
<h5 className="post_title">
  <Link to={`blog/${item.slug}`}>{item.mindesc}</Link>
</h5>

4. 检查Redux Slice状态管理 #

确认blogSlice中是否存在重置状态的逻辑（如组件卸载时的action），若有则移除或调整，确保全局状态在页面切换后不会被清空或重置为idle。

内容的提问来源于stack exchange，提问作者Batuhan Korkmaz