如何在React Router Dom中配置路由，使/german前缀路由始终显示菜单组件

要实现URL以/german为前缀时始终展示LanguageChoice菜单，同时不影响子路由组件的渲染，你需要使用React Router的嵌套路由功能，让菜单作为父布局的一部分，子路由内容嵌入到布局中。

问题分析 #

你当前的路由是平级配置，访问/german/listening时只会渲染Listening组件，不会保留LanguageChoice。嵌套路由可以让父路由的组件（包含菜单）始终存在，子路由内容在指定区域渲染。

解决方案步骤 #

1. 创建布局组件：定义一个包含LanguageChoice和路由出口(Outlet)的布局，所有/german前缀的路由都会使用这个布局。
2. 修改路由配置：将/german设为父路由，子路由嵌套其中，指定各自的路径和组件。
3. 菜单状态保持：在LanguageChoice中根据当前路由判断活跃项，保持展开/选中状态。

修改后的代码示例 #

首先引入所需的React Router API：

import { Routes, Route, Outlet, useLocation, Link } from 'react-router-dom';

1. 定义布局组件

function GermanLayout() {
  return (
    <div className="german-container">
      {/* 菜单始终显示在页面中 */}
      <LanguageChoice />
      {/* 子路由的内容会渲染到这个Outlet位置 */}
      <Outlet />
    </div>
  );
}

2. 更新路由配置

<Routes>
  <Route path="/" element={<TitlePage/>} /> 
  {/* 父路由使用布局组件，所有/german前缀的路由都会继承这个布局 */}
  <Route path="/german" element={<GermanLayout />}>
    {/* index路由：访问/german根路径时默认显示的内容 */}
    <Route index element={<LanguageChoice />} />
    {/* 子路由使用相对路径，对应完整路径为/german/listening */}
    <Route path="listening" element={<Listening />} />
    <Route path="vocabulary" element={<Vocabulary />} />
  </Route>
</Routes>

3. 让菜单保持展开/选中状态

修改LanguageChoice组件，根据当前路由动态控制菜单状态：

function LanguageChoice() {
  const location = useLocation();

  // 根据当前路由判断菜单项是否活跃
  const isListeningActive = location.pathname.includes('/listening');
  const isVocabularyActive = location.pathname.includes('/vocabulary');

  return (
    <div className="language-menu">
      <div className={`menu-section ${isListeningActive ? 'expanded' : ''}`}>
        <Link to="/german/listening">Listening</Link>
        {/* 若有子菜单，可通过expanded类控制显示/隐藏 */}
      </div>
      <div className={`menu-section ${isVocabularyActive ? 'expanded' : ''}`}>
        <Link to="/german/vocabulary">Vocabulary</Link>
      </div>
    </div>
  );
}

效果说明 #

• 访问/german：页面显示LanguageChoice菜单（index路由内容）。
• 访问/german/listening：菜单保持显示，同时渲染Listening组件。
• 菜单会根据当前路由自动保持展开/选中状态，用户随时可以操作菜单切换路由。

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