React-Router 6.23.0：导航后隐藏URL子路径的实现方案求助

核心思路 #

要实现点击导航后URL始终保持/fruits，同时切换对应子组件并加载loader数据，需要把组件切换逻辑从路由层级移到组件内部，用状态管理选中项，手动触发loader数据获取，而非依赖子路由路径变化。

步骤1：调整路由配置 #

删除所有子路由，只保留父级/fruits路由，因为不需要通过子路径区分组件：

const router = createBrowserRouter([
    {
        path: '/fruits',
        element: <Root />,
        errorElement: <ErrorPage />,
        loader: fruitloader // 父级loader可保留，按需使用
    }
]);

步骤2：改造Root组件，实现状态管理与组件切换 #

在Root组件中添加状态管理选中的水果类型，手动调用对应loader获取数据，并渲染对应子组件：

import { useState, useEffect } from 'react';
import { useNavigate, useLoaderData } from 'react-router-dom';
import { BananaServices } from './BananaServices';
import { AppleServices } from './AppleServices';
import { OrangeServices } from './OrangeServices';
import { bananaLoader, appleLoader, orangeLoader } from './loaders';

export function Root() {
  const navigate = useNavigate();
  const [selectedFruit, setSelectedFruit] = useState('banana'); // 默认选中香蕉
  const [fruitData, setFruitData] = useState(null);
  const parentData = useLoaderData(); // 父级loader返回的数据

  // 根据选中项调用对应loader获取数据
  useEffect(() => {
    let targetLoader;
    switch(selectedFruit) {
      case 'apple':
        targetLoader = appleLoader;
        break;
      case 'orange':
        targetLoader = orangeLoader;
        break;
      default:
        targetLoader = bananaLoader;
        break;
    }

    // 执行loader函数（loader接收的参数可根据实际需求传递）
    targetLoader({}).then(data => {
      setFruitData(data);
    }).catch(err => {
      console.error('加载数据失败:', err);
    });

    // 强制URL保持为/fruits，防止意外修改
    navigate('/fruits', { replace: true });
  }, [selectedFruit, navigate]);

  // 渲染对应子组件
  const renderCurrentComponent = () => {
    if (!fruitData) return <div>加载中...</div>;
    
    switch(selectedFruit) {
      case 'apple':
        return <AppleServices data={fruitData} />;
      case 'orange':
        return <OrangeServices data={fruitData} />;
      default:
        return <BananaServices data={fruitData} />;
    }
  };

  return (
    <AppContainerInnerContainer>
      <GlobalStyles />
      <Sidebar>
        {/* 用按钮替代NavLink，通过点击事件切换状态 */}
        <button 
          onClick={() => setSelectedFruit('banana')}
          className={selectedFruit === 'banana' ? 'active' : ''}
        >
          Banana
        </button>
        <button 
          onClick={() => setSelectedFruit('apple')}
          className={selectedFruit === 'apple' ? 'active' : ''}
        >
          Apple
        </button>
        <button 
          onClick={() => setSelectedFruit('orange')}
          className={selectedFruit === 'orange' ? 'active' : ''}
        >
          Orange
        </button>
      </Sidebar>
      <Detail>
        {renderCurrentComponent()}
      </Detail>
    </AppContainerInnerContainer>
  );
}

步骤3：修改子组件，接收传递的数据 #

原组件依赖useLoaderData()，现在改为通过props接收手动加载的数据：

export const BananaServices = ({ data }) => {
  const { name, bananaTypes, content: { plaintext } } = data.item;

  return (
    <>
      <h1>{name}</h1>
      <p>{plaintext}</p>
      {/* 注意：自定义标签需改为合法HTML标签，否则样式可能异常 */}
      <div className="bananaTypesContainer">
        {bananaTypes.map((bananaType, index) => (
          <div key={index} className="bananaTypes">
            <h2>{bananaType.name}</h2>
            {/* 修复原代码错误：bananaType是对象，需遍历其数组属性（示例为items） */}
            {bananaType.items?.map((item, itemIndex) => (
              <li key={itemIndex}>
                <a href={item.url} target="_blank" rel="noopener noreferrer">{item.name}</a>
              </li>
            ))}
          </div>
        ))}
      </div>
    </>
  );
};

原代码错误修复提示 #

1. 原路由中Orange子路由存在语法错误：Loader: 'orangeLoader'需改为小写loader: orangeLoader，且path: 'orange-services'后缺少逗号；
2. 子组件中自定义标签（如bananaTypesContainer）需改为合法HTML标签（如div），否则浏览器会当作未知标签处理；
3. 原BananaServices组件中bananaType.map逻辑错误：bananaType是对象，需遍历其内部的数组字段（如bananaType.items）。

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