React路由跳转后AllPost组件内容不显示，需手动刷新问题求助

在React项目中使用Switch实现路由跳转，Navbar里的“All Post”链接点击后，AllPost组件内容为空，必须手动刷新页面才能正常显示帖子内容。

问题根源 #

代码中重复嵌套了Router组件：App.jsx已用<Router>包裹整个应用，Navbar.jsx又再次嵌套<Router>。React Router的Router是全局上下文，嵌套会导致路由逻辑冲突，使得Link跳转时新组件的生命周期钩子（如useEffect）无法触发，进而无法加载Firestore数据。另外，Navbar内的Link路径使用了相对路径post，可能导致路由解析错误。

修复步骤 #

1. 移除Navbar中的Router嵌套 #

修改Navbar.jsx，删除外层的<Router>标签，依赖App.jsx提供的全局路由上下文即可：

// Navbar.jsx 修正后
import React from "react";
import { withAuth0 } from "@auth0/auth0-react";
import { Component } from "react";
import "./NavbarStyles.css";
import { Link } from "react-router-dom";

class Navbar extends Component {
  state = { clicked: false };
  handleClick = () => {
    this.setState({ clicked: !this.state.clicked });
  };
  render() {
    const { user, loginWithRedirect, logout, isAuthenticated } = this.props.auth0;
    return (
      <>
        <nav>
          {/* 将a标签改为Link避免页面刷新 */}
          <Link to="/">
            <svg
              id="logo-16"
              width="109"
              height="43"
              viewBox="0 0 109 43"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M64.9315 11.4284C62.1883 8.6852 58.9316 6.5091 55.3475 5.0245C51.7633 3.5399 47.9219 2.7758 44.0424 2.7758C40.1629 2.7758 36.3215 3.5399 32.7373 5.0245C29.1532 6.5091 25.8965 8.6852 23.1533 11.4284L44.0424 32.3174L64.9315 11.4284Z"
                className="ccompli1"
                fill="#FFD200"
              ></path>
              <path
                d="M44.0686 32.3475C46.8118 35.0907 50.0684 37.2667 53.6526 38.7513C57.2367 40.2359 61.0782 41 64.9577 41C68.837 41 72.679 40.2359 76.263 38.7513C79.847 37.2667 83.104 35.0907 85.847 32.3475L64.9577 11.4584L44.0686 32.3475Z"
                className="ccompli2"
                fill="#06E07F"
              ></path>
              <path
                d="M44.017 32.3429C41.2738 35.0861 38.0171 37.2621 34.433 38.7467C30.8488 40.2313 27.0074 40.9954 23.1279 40.9954C19.2484 40.9954 15.407 40.2313 11.8228 38.7467C8.2387 37.2621 4.982 35.0861 2.2388 32.3429L23.1279 11.4538L44.017 32.3429Z"
                className="ccustom"
                fill="#E3073C"
              ></path>
              <path
                d="M64.9831 11.433C67.726 8.6898 70.983 6.5138 74.567 5.0292C78.151 3.5446 81.993 2.7805 85.872 2.7805C89.752 2.7805 93.593 3.5446 97.177 5.0292C100.761 6.5138 104.018 8.6898 106.761 11.433L85.872 32.3221L64.9831 11.433Z"
                className="ccustom"
                fill="#1F84EF"
              ></path>
            </svg>
          </Link>
          <div>
            <ul
              id="navbar"
              className={this.state.clicked ? "#navbar active" : "#navbar"}
            >
              {/* 使用绝对路径 */}
              <Link to="/post">All Post</Link>
              {isAuthenticated && (
                <li>
                  <p className="para">Welcome , {user.name}</p>
                </li>
              )}

              {isAuthenticated ? (
                <li>
                  <button
                    onClick={() => 
                      logout({
                        logoutParams: { returnTo: window.location.origin },
                      })
                    }
                  >
                    Log Out
                  </button>
                </li>
              ) : (
                <li>
                  <button onClick={() => loginWithRedirect()}>Log In</button>
                </li>
              )}
            </ul>
          </div>
          <div id="mobile" onClick={this.handleClick}>
            <i
              id="bar"
              className={this.state.clicked ? "fas fa-times" : "fas fa-bars"}
            ></i>
          </div>
        </nav>
      </>
    );
  }
}

export default withAuth0(Navbar);

2. 修正Link路径 #

将Navbar中的<Link to="post">改为<Link to="/post">，使用绝对路径匹配App.jsx中的路由配置。

3. 可选：优化AllPost数据加载逻辑 #

添加错误捕获，方便排查数据加载问题：

// AllPost.jsx 中加载数据的useEffect
useEffect(() => {
  const getUsers = async () => {
    try {
      const data = await getDocs(userCollectionRef);
      setUser(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
    } catch (err) {
      console.error("加载帖子失败:", err);
    }
  };
  getUsers();
}, []);

修复原理 #

• Router组件是全局单例，嵌套会破坏路由上下文一致性，导致组件跳转时生命周期钩子无法正常执行，数据加载逻辑不触发。
• 绝对路径确保路由解析始终匹配App.jsx中定义的/post规则，避免相对路径导致的路由错误。

内容的提问来源于stack exchange，提问作者Android Army