Javascript 使用 React Router v6 交换我的网络应用程序的两个不同部分

我正在为我的新Web应用程序使用Reaction路由V6.我正在使用带有嵌套路由的插座来换出<main>个组件，这工作得很好.现在，我在主组件的左侧还有一个左侧面板.在那个侧面板中，有一个顶部的按钮，我也想根据路由交换.我怎样才能正确地做到这一点呢？我知道你不能有一个以上的门店.

以下是我的主要布局:

return (
    <div className={'d-flex flex-column h-100'}>
        <header className={'border-bottom'}>
            <h4>Title</h4>
        </header>
        <div className={'d-flex align-items-stretch h-100'}>
            <LeftPane /> <!-- second part to be swapped would be in this component -->
            <main className={'p-2'}>
                <Outlet />
            </main>
        </div>
        <footer className={'py-2 border-top'}>
            <div className={'d-flex flex-row w-50 mx-auto justify-content-between'}>
                <div>&copy; {year}</div>
                <div>company</div>
                <div>address</div>
            </div>
        </footer>
    </div>
);

我的路由代码非常简单:

<Router>
    <Routes>
        <Route path={'/'} element={<HomePage />} />
        <Route path={'/dashboard'} element={<DashboardPage />}>
            <Route path={'ingredients'} element={<Ingredients />} />
            <Route path={'users'} element={<Users />} />
        </Route>
    </Routes>
</Router>

我正在交换不同的元素到main段的基础上 Select 的路由.例如，当点击Ingredients时，它会使用Outlet将Ingredients部分切换到<main>部分.

我的Ingredients组件如下所示:

import React from 'react';

const Ingredients = () => {
    return (
        <div className={'d-flex'}>
            <h5 className={'title flex-grow-1 border-bottom text-start pb-1'}>
                Active Ingredients
            </h5>
        </div>
    );
};

export default Ingredients;

And here is a screenshot to show what I am trying to achieve: