React中Link跳转的目标组件需刷新页面才能正常加载

核心故障现象：配置在页面Footer中的条款跳转Link，点击后无法正常加载目标组件，只有手动刷新对应路由的页面后，组件内容才能正常显示

相关代码上下文 #

故障跳转逻辑位于项目的Footer.js文件中，对应代码行号为44，结构为Link组件包裹列表项li标签，完整组件代码如下：

import React from "react";
// import { Button } from "./Button";
import "./Footer.css";
import { Text, Div, Button, Row, Col, Container, Image } from "atomize";
import logo from "../logo/tryb_logo_medium.png";
import { Link } from "react-router-dom";
import TwitterIcon from '@material-ui/icons/Twitter';
import FacebookIcon from '@material-ui/icons/Facebook';
import InstagramIcon from '@material-ui/icons/Instagram';
import { Icon } from "@material-ui/core";

function Footer() {
  return (
    <div className="main-footer" id="onTop">
      <Container>
        <Row d="flex">
          {/* Col 1 
          <div className="col-sm">
            <section className="footer-subscription">
              <p className="footer-subscription-heading">Join the Tryb</p>

              <div className="input-areas">
                <form>
                  <input
                    type="email"
                    name="email"
                    placeholder="Your email"
                    className="footer-input"
                  />
                </form>
                <p className="footer-subscription-text">
                  Unsubscribe at any time
                </p>
             <Button>Subscribe</Button> 
              </div>
            </section>
          </div> */}
          {/* Col 2 */}
          <Col textColor="white" size={{ xs: '12', md: '4' }}>
            <div text-align="center" p="1rem">
              <h4>Need Help?</h4>
              <ul className="list-unstyled">
                <a href="mailto:trybprints@gmail.com"><li>Contact Us</li></a>
                <Link to="/termsandconditions">
                <li>Terms & Conditions</li>
                </Link>
              </ul>
            </div>
          </Col>

       
          {/* Col 4 */}
          <Col size={{ xs: '12', md: '4' }} align="center">
            <div p="1rem">
           
              <h4>Social</h4>
              <ul className="list-unstyled">
                <a href="#" target="_blank" ><FacebookIcon/></a>
                <a href="#" target="_blank" ><InstagramIcon/></a>
                <a href="#" target="_blank" ><TwitterIcon/></a>
              </ul>
            </div>
          </Col>

             {/* Col 3 */}
             <Col size={{ xs: '12', md: '4' }}>
            <div p="1rem">
              <ul className="list-unstyled">
                <li> <img
                    src={logo}
                    alt="tryb logo"
                    width="300px"
                    className="d-inline-block align-top"
                /></li>
                <li></li>
              </ul>
            </div>
          </Col>
          
        </Row>
      </Container>
      <hr />
      <div className="copyright">
         Copyright &copy; Tryb Prints {new Date().getFullYear()}
      </div>
    </div>
  );
};

export default Footer;

常见故障诱因 #

• 路由规则缺失：项目根路由配置中未关联/termsandconditions路径对应的页面组件，或是路由定义位置在BrowserRouter的包裹范围外部，导致客户端路由切换时无法匹配到对应组件
• HTML结构不规范：当前代码中把<li>标签直接嵌套在<Link>内部，不符合ul-li的标准嵌套结构，会导致浏览器解析DOM时出现结构偏移，干扰React Router的点击事件捕获
• 组件逻辑依赖硬刷新：目标条款页面的组件初始化逻辑直接读取window.location、或是浏览器全局DOM状态，SPA软跳转时不会重新初始化浏览器全局上下文，导致组件渲染为空
• 路由包裹范围错误：Footer组件被放置在BrowserRouter的外部，导致组件内的Link无法正常获取路由上下文，跳转逻辑失效

对应解决方案 #

• 修正DOM嵌套结构，把Link标签放在<li>内部，调整后的结构为：<li><Link to="/termsandconditions">Terms & Conditions</Link></li>
• 检查根路由配置，确认/termsandconditions路径的Route定义被放置在路由的有效匹配列表中，且没有被通配路由规则提前拦截
• 把目标组件中依赖硬刷新的逻辑，替换为React Router提供的useLocation、useParams钩子获取路由参数，避免依赖浏览器原生的location对象
• 确认项目入口的BrowserRouter组件包裹范围覆盖所有使用Link、Route的页面组件，不要把需要路由能力的组件放在路由包裹层外部

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