React路由点击链接URL变更但组件不渲染，需固定导航栏

问题核心：你当前的路由结构中，Navigation作为父路由的渲染组件，但组件内部没有添加Outlet——React Router v6中嵌套路由的子组件必须通过Outlet指定渲染位置，所以URL变化后子组件无法挂载显示。

解决方案步骤： #

1. 在Navigation.jsx中引入并添加Outlet，用于渲染子路由组件
2. 保持App.jsx的嵌套路由结构，确保导航栏始终显示

修改后的Navigation.jsx代码： #

import { Link, Outlet } from 'react-router-dom';
import { useState } from 'react';

export default function Navigation() {
  const [burgerClass, setBurgerClass] = useState('burger-bar unclicked');
  const [menuClass, setMenuClass] = useState('menu hidden');
  const [isMenuClicked, setIsMenuClicked] = useState(false);

  const updateMenu = () => {
    if (!isMenuClicked) {
      setBurgerClass('burger-bar clicked');
      setMenuClass('menu visable');
    } else {
      setBurgerClass('burger-bar unclicked');
      setMenuClass('menu hidden');
    }
    setIsMenuClicked(!isMenuClicked);
  }

  return (
    <div className='navigation'>
      <nav>
        <div className='burger-menu' onClick={updateMenu}>
          <div className={burgerClass}></div>
          <div className={burgerClass}></div>
          <div className={burgerClass}></div>
        </div>
        <Link className='logo-container' to='/'>
          <h1>JESSE GOODRUM</h1>
        </Link>
        
        <div className='social-media-links-container'>
          <a href='http://www.linkedin.com/in/jessegoodrum/'>
            <i className="fa-brands fa-linkedin"></i>
          </a>
          <a href='https://github.com/jessegoodrum/'>
            <i className="fa-brands fa-github"></i>
          </a>
        </div>  
      </nav>

      <div className={menuClass}>
        <ul>
          <li>
            <Link className='nav-link' to='/projects'>PROJECTS</Link>
          </li>
          <li>
            <Link className='nav-link' to='/resume'>RESUME</Link>
          </li>
        </ul>
      </div>

      {/* 子路由组件会在此处渲染 */}
      <Outlet />
    </div>
  )
}

App.jsx代码保持不变（确保嵌套路由结构正确）： #

import { Routes, Route } from 'react-router-dom';
import Navigation from './Navigation';
import Home from './Home';
import Projects from './Projects';
import Resume from './Resume';

function App() {
  return (
    <div>
      <Routes>
        <Route path='/' element={<Navigation />} >
          <Route index element={<Home />} />
          <Route path='projects' element={<Projects />} />
          <Route path='resume' element={<Resume />} />
        </Route>
      </Routes>
    </div>
  );
}

export default App;

原理说明： #

React Router v6的嵌套路由机制要求，父路由的渲染组件必须包含Outlet组件，作为子路由组件的挂载容器。没有Outlet时，子路由的URL会匹配但组件没有渲染位置，因此出现URL变化但页面无更新的情况。添加Outlet后，子组件会在导航栏下方的位置渲染，同时保持导航栏常驻。

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