React跳转会员页加载后无功能、滚动条缺失，手动刷新才正常求助

1. 跳转后无法返回首页问题 #

核心原因 #

你在MemberCheck组件的JSX渲染逻辑中直接执行了history.push("/members")，属于典型的副作用放置错误：
只要钱包连接状态active为true，每次组件渲染都会无条件执行跳转逻辑，你点击返回首页触发渲染后，立刻又被推回/members路由，因此地址栏仅闪现首页地址就回弹。
另外你放在li子节点中的<Redirect to="/" />也不会生效，Redirect组件必须放在渲染返回的顶层才能触发重定向。

修复方案 #

将跳转逻辑从JSX中移出，放到useEffect中监听状态触发：

import { useWeb3React } from "@web3-react/core";
import { useHistory, useLocation } from "react-router-dom";
import { useEffect } from "react";
import { injected } from "./wallet/Connect";

export default function MemberCheck() {
  const { active, activate } = useWeb3React();
  const history = useHistory();
  const location = useLocation();

  async function connect() {
    try {
      await activate(injected);
      console.log("connected");
    } catch (ex) {
      console.log(ex);
    }
  }

  // 仅当钱包激活且当前不在会员页时跳转
  useEffect(() => {
    if (active && location.pathname !== "/members") {
      history.push("/members");
    }
  }, [active, location.pathname, history]);

  return (
    <div>
      <li
        onClick={connect}
        className="nav-item memberCheck"
        style={{
          textDecoration: "none",
          color: "white",
          fontFamily: "scary",
          fontSize: "2rem",
        }}
      >
        MEMBERS ONLY
      </li>
    </div>
  );
}

如果需要限制未登录用户访问会员页，将校验逻辑放在Members组件内或者路由守卫中即可。

2. 会员页滚动条消失问题 #

核心原因 #

Bootstrap的模态框触发时会给body标签添加modal-open类，该类默认设置overflow: hidden隐藏滚动条，你连接MetaMask触发的弹窗在路由跳转后没有正常销毁该类，刷新页面后样式重置才恢复正常。

修复方案 #

在Members组件挂载时手动重置body样式：

// 在Members组件中添加以下逻辑
import { useEffect } from "react";

function Members() {
  useEffect(() => {
    // 重置滚动条样式
    document.body.style.overflow = "auto";
    document.body.classList.remove("modal-open");
  }, []);

  // 原有组件逻辑
}

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