React Router路由跳转需刷新才加载组件如何修复

路由地址正常更新但子页面不渲染、无法切回作品集的核心原因，是嵌套路由的父组件Layout缺少子路由渲染出口。React Router v6的嵌套路由规则要求，父路由组件必须放置<Outlet />组件，作为匹配到的子路由元素的挂载位置。你当前的Layout只引入了侧边栏，没有预留子组件渲染位置，路由跳转时React Router匹配到了对应页面组件，但是找不到地方挂载，只有手动刷新页面时才会强制渲染对应内容。
另外侧边栏的NavLink用了React Router v5的旧属性，全小写的activeclassname和v5专属的exact属性在v6版本不生效，会导致导航激活态异常，也是部分路由切换失效的诱因。

• 修改Layout组件，添加Outlet出口
  首先在Layout组件文件中引入Outlet，在侧边栏旁的页面内容区域放置该组件，参考结构如下：

  import Sidebar from './Sidebar'
  // 引入Outlet
  import { Outlet } from 'react-router-dom'
  import './index.scss'
  
  const Layout = () => {
    return (
      <div className="app-container">
        <Sidebar />
        <div className="main-content">
          {/* 子路由组件会全部渲染到这个位置 */}
          <Outlet />
        </div>
      </div>
    )
  }
  
  export default Layout
  

• 修复Sidebar中NavLink的过时属性
  React Router v6用end属性替代了旧版的exact，同时推荐用className回调的方式处理激活类名，避免大小写导致的属性失效问题，修改导航部分代码：

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

  *end属性的作用是保证只有完全匹配根路径/时，首页导航才会显示激活状态，避免其他子路由匹配时首页按钮也高亮。

修改完成后保存，不需要手动刷新，点击侧边栏导航按钮时，地址栏更新的同时对应页面组件会自动渲染到Outlet位置，之前无法切回作品集、必须刷新才能加载页面的问题会全部解决。

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