React-Router 6.23.0 - 如何在导航到 url 后隐藏子路径

Question

我使用react-router 6.23.0的路线有以下代码

const router = createBrowserRouter([
    {
        path: '/fruits',
        element: <Root />,
        errorElement: <ErrorPage />,
        loader: fruitloader,
        children: [
            {
                loader: bananaLoader,
                index: true,
                path: 'banana-services?',
                element: <BananaServices />
            },
            {
                loader: appleLoader,
                path: 'apple-services',
                element: <AppleServices />
            },
            {
                Loader: 'orangeLoader',
                path: 'orange-services'
                element: <OrangeServices />
            }
        ]
    }
]);

<AppContainerInnerContainer>
    <GlobalStyles />
    <Sidebar>
        <NavLink to="fruits/banana">Banana</NavLink>
        <NavLink to="fruits/apple">Apple</NavLink>
        <NavLink to="fruits/orange">Orange</NavLink>
    </Sidebar>
    <Detail>
        <Outlet />
    </Detail>
</AppContainerInnerContainer>

我的要求是，在 url 路径中，我不希望导航到“页面”后显示子路径。

例如，当用户点击“Banana”时，而不是react-router给我的，

http://www.example.com/fruits/banana

。

我想要

http://www.example.com/fruits

但仍然可以查看香蕉页面。左侧的侧边栏应该仍然完好无损。苹果和橙子也有类似的经历。我只想显示

/fruits

，尽管他们点击的是孩子。

如有任何帮助，我们将不胜感激！

Answer 1

如果您不需要它与路由器一起工作，您可以捕获 onClick 并更改在

/fruits

页面中呈现的组件。要做到这一点，

• 不要使用 Navlink，而只使用 Buttons（使用正确的类名来保持样式一致）
• 替换或修改

  <Root />

  以具有：

 const [currentPage, setCurrentPage] = useState<'banana' | 'apple' | 'orange' | ''>('')

• Root 的返回值应包含正确的组件，例如：

   ... 
   const getFruitComponent = () => {
      switch (currentPage) {
         case 'apple' : return <AppleServices />
         case 'banana' : return <BananaServices />
         ...
         case '': return <FruitServicesIndex />
      }
   }

   return (
   ...
     {getFruitComponent()}
   ...
   )
}

请注意，这种方法可能不适用于浏览器的导航以及后退和前进按钮。