Semantic UI Menu路由跳转失效：URL变化但页面不切换

核心问题分析 #

• 路由结构错误：你把Novel和Cinema设为Music的子路由，但Music组件内没有渲染<Outlet />，导致子路由组件永远无法显示，仅URL变化而页面停留在Music。
• active状态不匹配：Cinema对应的Menu.Item命名为'movie'，和路由路径'cinema'不统一，易导致状态判断混乱。
• 路径写法不规范：部分NavLink的to属性用了相对路径（如"novel"），虽在根路径下暂时可用，但绝对路径（"/novel"）更可靠。

修正后的完整代码 #

import React, { useState } from 'react';
import { BrowserRouter, Routes, Route, NavLink } from "react-router-dom";
import { Icon, Menu } from 'semantic-ui-react'

import Music from './components/music.js'
import Novel from './components/novel.js'
import Cinema from './components/cinema.js'

function App() {
  return (
    <BrowserRouter>
      <Navigation />
      <Routes>
        // 改为同级路由，每个路径对应独立组件
        <Route path="/" element={<Music />} />
        <Route path="/novel" element={<Novel />} />
        <Route path="/cinema" element={<Cinema />} />
      </Routes>
    </BrowserRouter>
  );
}

function Navigation() {
  const [activeItem, setActiveItem] = useState("music");

  return (
    <Menu fluid widths={3} icon='labeled'>
      <Menu.Item
        as={NavLink} 
        to="/novel"
        name='novel'
        active={activeItem === 'novel'}
        onClick={() => setActiveItem("novel")}
      >
        <Icon color='blue' name='book' />
        Novels
      </Menu.Item>
      <Menu.Item
        as={NavLink} 
        to="/cinema"
        name='cinema' // 修正命名，与路由、active状态统一
        active={activeItem === 'cinema'}
        onClick={() => setActiveItem("cinema")}
      >
        <Icon color='orange' name='video camera' />
        Movies
      </Menu.Item>
      <Menu.Item
        as={NavLink} 
        to="/"
        name='music'
        active={activeItem === 'music'}
        onClick={() => setActiveItem("music")}
      >
        <Icon color='purple' name='music' />
        Music
      </Menu.Item>
    </Menu>
  )
}

export default App;

简化优化方案（无需手动维护active状态） #

NavLink会自动给当前匹配的链接添加active类，Semantic UI的Menu.Item可直接识别该类并应用激活样式，无需手动维护useState：

function Navigation() {
  return (
    <Menu fluid widths={3} icon='labeled'>
      <Menu.Item
        as={NavLink} 
        to="/novel"
        name='novel'
      >
        <Icon color='blue' name='book' />
        Novels
      </Menu.Item>
      <Menu.Item
        as={NavLink} 
        to="/cinema"
        name='cinema'
      >
        <Icon color='orange' name='video camera' />
        Movies
      </Menu.Item>
      <Menu.Item
        as={NavLink} 
        to="/"
        name='music'
        end // 根路径加end，避免匹配所有子路径时误激活
      >
        <Icon color='purple' name='music' />
        Music
      </Menu.Item>
    </Menu>
  )
}

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