React Router v6路由URL更新但组件不加载、Netlify部署报404

根因 #

代码里存在两个容易触发v6路由渲染异常的问题，还有一个容易误判为「未渲染」的样式问题：

• 嵌套路由的子路径写法不统一：about路由用的是无前置斜杠的相对路径，contact、portfolio用的是带前置斜杠的绝对路径，v6部分小版本下，嵌套父路由下混用绝对/相对子路径会导致路由匹配树异常，父路由无法正常挂载子组件。
• NavLink用了v5版本的废弃API：v6已经移除了exact、activeClassName属性，虽然语法上不会直接抛错，但会导致路由导航的状态同步异常，部分场景下会出现URL更新但路由匹配状态未触发组件重渲染的问题。
• 样式遮挡误判：如果.page容器、Outlet挂载节点设置了display: none、height: 0、z-index为负值被其他元素遮挡，会出现组件实际已经渲染但视觉上不可见的情况，容易被误判为未渲染。

修复步骤 #

• 统一App.js中的子路由写法，嵌套路由下全部使用相对路径（去掉子路径前的/）：
  修改后的App.js路由部分代码：

<Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Home />} />
    <Route path="about" element={<About />} />
    <Route path="contact" element={<Contact />} /> {/* 去掉前面的/ */}
    <Route path="portfolio" element={<Portfolio />} /> {/* 去掉前面的/ */}
  </Route>
</Routes>

• 修改Sidebar里的NavLink写法，适配v6的API规范：根路径导航加end属性实现精确匹配（避免所有页面都高亮首页按钮），用className回调替代废弃的activeClassName，移除废弃的exact属性：
  修改后的导航部分代码：

<nav>
  <NavLink end className={({ isActive }) => isActive ? 'active' : ''} to="/">
    <FontAwesomeIcon icon={faHome} color="#4d4d4e" />
  </NavLink>
  <NavLink className={({ isActive }) => isActive ? 'active about-link' : 'about-link'} to="/about">
    <FontAwesomeIcon icon={faUser} color="#4d4d4e" />
  </NavLink>
  <NavLink className={({ isActive }) => isActive ? 'active portfolio-link' : 'portfolio-link'} to="/portfolio">
    <FontAwesomeIcon icon={faSuitcase} color="#4d4d4e" />
  </NavLink>
  <NavLink
    className={({ isActive }) => isActive ? 'active contact-link' : 'contact-link'}
    to="/contact"
  >
    <FontAwesomeIcon icon={faEnvelope} color="#4d4d4e" />
  </NavLink>
</nav>

• 检查Layout相关的SCSS代码，确认.page容器、Outlet挂载区域没有设置导致内容不可见的样式，确保容器有正常宽高、overflow未设置为隐藏、层级正常。

根因 #

React单页应用的路由是前端在客户端通过JS解析URL实现的，Netlify服务器默认会按照请求路径查找对应的静态文件（比如访问/about时会查找服务器上的/about.html文件），找不到对应文件就会返回404错误，不会把请求交给前端路由处理。

修复步骤 #

• 在你的项目public目录（和src文件夹同级的静态资源目录）下，新建一个名为_redirects的文件，注意这个文件没有后缀名，文件内写入以下内容：

/*    /index.html   200

这段配置的作用是告诉Netlify服务器，所有路径的请求都直接返回index.html文件，状态码为200，之后前端的react-router会正常解析URL渲染对应组件。修改完成后重新推送代码部署到Netlify即可解决404问题。

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