React Router中Route组件带exact参数时着陆页无法加载问题求助

修复方案 #

异常核心是About组件的笔误导致的编译/运行错误，和exact参数本身的路由逻辑无关：

1. About组件内部错误使用了<About>标签，要么是未闭合的JSX标签导致编译失败，要么是递归调用自身触发渲染死循环，直接阻塞应用渲染。
   • 移除exact后页面正常的原因：没有exact修饰的path="/"会匹配所有路由，不管访问哪个路径都只会渲染Home组件，永远不会触发有问题的About组件，所以不会报错。但此时所有跳转都只会显示首页，自然导航失效。
   • 热更时加exact刷新后正常的原因：开发环境的热更新会复用之前的编译缓存，暂时屏蔽了编译错误，重启应用后全量编译时错误就会复现。

具体修复步骤

• 修正About组件的笔误，把尖括号去掉改成普通文本：

// About 组件修正后代码
import React from 'react';
import './About.css'
import img from '../MyPics/pic1.png'

const About = () => {
    return (
        <div className='about-main'>
            About section *mostly text*
        </div>
    );
};

export default About;

• 修正菜单的HTML结构，ul的合法子元素只能是li，把Link放到li内部，避免导航交互异常：

// Menu组件菜单项修正后代码
<ul>
  <li className="menu-link" >
    <Link exact to='/'>Home</Link>
  </li>
  <li className="menu-link" >
    <Link to='/about'>About</Link>
  </li>
  {/* 其余菜单项保持不变 */}
</ul>

• 保持App组件内的路由配置不变即可，不需要额外调整strict等参数：

// App组件路由配置
<Switch>
  <Route strict exact path='/' component={Home} />
  <Route path='/about' component={About} />  
</Switch>

修复完成后重启应用，首页渲染、导航跳转都会恢复正常。

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