React NavLink跳转后页面空白，需手动刷新加载内容求助

核心问题分析 #

1. 嵌套路由无渲染出口：父路由组件Layout未使用React Router v6的<Outlet />组件，子路由内容没有渲染容器，导致切换路由后页面空白。
2. 路由路径格式混乱：混用绝对路径（/contact、/portfolio）和相对路径（about），破坏了嵌套路由的匹配逻辑。
3. NavLink属性错误：activeclassname拼写错误（应为驼峰式activeClassName），且React Router v6中NavLink不再使用exact属性，需用end替代。

具体修改步骤 #

1. 为Layout组件添加Outlet

在Layout组件中导入并使用<Outlet />，作为子路由内容的渲染容器：

// Layout.jsx
import { Outlet } from 'react-router-dom';

const Layout = () => {
  return (
    <div className="layout-container">
      {/* Layout原有内容 */}
      <Outlet /> {/* 子路由组件将渲染在此处 */}
    </div>
  );
};

export default Layout;

2. 修正App.js中的路由配置

统一子路由为相对路径，移除不必要的exact属性（React Router v6默认精准匹配）：

// App.js
import './App.scss'
import { Routes, Route } from 'react-router-dom'
import Layout from './components/Layout'
import Home from './components/Home'
import About from './components/About'
import Contact from './components/Contact'
import Portfolio from './components/Portfolio'
import Sidebar from './components/Sidebar'

function App() {
  return (
    <div>
      <Sidebar />
      <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>
    </div>
  );
}

export default App

3. 修正Sidebar中的NavLink属性

修正activeClassName拼写，用end替代exact，统一路由路径格式：

// Sidebar/index.jsx
import './index.scss'
import { NavLink } from 'react-router-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {faHome, faUser, faEnvelope, faSuitcase} from '@fortawesome/free-solid-svg-icons'
import { faLinkedin, faBehanceSquare } from '@fortawesome/free-brands-svg-icons'

const Sidebar = () => (
    <div className='nav-bar'>
        <nav>
            <NavLink end activeClassName="active" to="/">
                <FontAwesomeIcon icon={faHome} color="#4d4d4e" />
            </NavLink>
            <NavLink activeClassName="active" className="about-link" to="about">
                <FontAwesomeIcon icon={faUser} color="#4d4d4e" />
            </NavLink>
            <NavLink activeClassName="active" className="portfolio-link" to="portfolio">
                <FontAwesomeIcon icon={faSuitcase} color="#4d4d4e" />
            </NavLink>
            <NavLink activeClassName="active" className="contact-link" to="contact">
                <FontAwesomeIcon icon={faEnvelope} color="#4d4d4e" />
            </NavLink>
        </nav>
        <ul> 
            <li>
                <a target="_blank" rel='noreferrer' href="https://www.linkedin.com/in/braden-mcgee/">
                    <FontAwesomeIcon icon={faLinkedin} color="#4d4d4e"/>
                </a>
                <a target="_blank" rel='noreferrer' href="https://www.behance.net/bradenrmcgee">
                    <FontAwesomeIcon icon={faBehanceSquare} color="#4d4d4e"/>
                </a>
            </li>
        </ul>
    </div>
)

export default Sidebar

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