此问题已在此处有答案：

How do I render components with different layouts/elements using react-router-dom v6（2个答案）
3天前关闭。
我是ReactJS的新手，我正在尝试创建一个类似于https://react.dev/learn/installation的前端，用户可以点击侧边栏上的标签并在侧边呈现新页面。URL也会根据在侧边栏上点击的标签而改变，侧边栏将保留在侧边。
问题是，当我点击标签时，它会将我导航到正确的页面，但侧边栏不见了。

App.js中的路由

function App() {
   

    return (
        <>
            <div>
                <center>
                    <span>
                        <NavBar></NavBar>
                    </span>
                </center>
            </div>
            <Routes>
                <Route path="/" element={<HomePage></HomePage>}></Route>
                <Route path="/development">
                    <Route
                        index
                        element={<DevelopmentPage></DevelopmentPage>}
                    ></Route>
                    <Route path=":id" element={<ChildPage></ChildPage>}></Route>
                </Route>
                <Route path="/about" element={<AboutPage></AboutPage>}></Route>
                <Route
                    path="/contact"
                    element={<ContactPage></ContactPage>}
                ></Route>
            </Routes>
        </>
    )
}

export default App

这是我侧边栏的代码

export default function SideBar({
    sideBarParentTabsState,
    onSetsideBarParentTabsState
}) {
    const [isShowChildrenComponents, setIsShowChildrenComponents] =
        useState(false)
    const sideBarContextArr = useContext(SideBarContext)

    function SideBarParentTab({parentTabProps}) {
        return (
            <button
                className="sidebar"
                onClick={() => {
                    setIsShowChildrenComponents(!isShowChildrenComponents)
                }}
            >
                {parentTabProps.name}
            </button>
        )
    }

    function SideBarChildTab({childTabProps}) {
        return (
            <>
                <div>
                    <Link to={`${childTabProps.id}`}>  // When I click the child tab in the side bar, this links me to the page.
                        <button
                            onClick={() =>
                                console.log('child component clicked')
                            }
                        >
                            {childTabProps.name}
                        </button>
                    </Link>
                </div>
            </>
        )
    }

functions
    function isParentTabStateActive(index) {
        return sideBarParentTabsState[index]
    }

    function handleParentTabState(index) {
        const sideBarParentTabsStateCopy = sideBarParentTabsState.slice()
        sideBarParentTabsStateCopy[index] = !sideBarParentTabsStateCopy[index]
        onSetsideBarParentTabsState(sideBarParentTabsStateCopy)
    }

    function renderSideBarChildTabs(parentTab) {
        return parentTab.childTabs.map((childTabProps) => {
            return (
                <>
                    {
                        <SideBarChildTab
                            childTabProps={childTabProps}
                        ></SideBarChildTab>
                    }
                </>
            )
        })
    }

    return (
        <>
            <span>
                {sideBarTabsTestData.map((parentTabs, index) => {
                    return (
                        <>
                            {
                                <div
                                    onClick={() => handleParentTabState(index)}
                                >
                                    <SideBarParentTab
                                        parentTabProps={parentTabs}
                                    ></SideBarParentTab>
                                    {isParentTabStateActive(index)
                                        ? renderSideBarChildTabs(parentTabs)
                                        : null}
                                </div>
                            }
                        </>
                    )
                })}
            </span>
            <Outlet></Outlet>
        </>
    )
}

这是我的孩子页面。

export default function ChildPage() {
    const {id} = useParams()

    return (
        <div>
            <center>
                <h1>CHILD Page {id} </h1>{' '}
            </center>
        </div>
    )
}

我能想到的一个解决方案是将侧边栏作为元素放在父路由中

<Route path="/development" element= {<SideBar/>} >
     <Route index
        element={<DevelopmentPage></DevelopmentPage>}
         ></Route>
         <Route path=":id" element={<ChildPage></ChildPage>}></Route>
</Route>

但这意味着侧边栏的状态必须在App.js中，我基本上会从App -> DevelopmentPage -> Sidebar & Child传递 prop ，我想避免这样做，因为我不想钻 prop 。
我如何让存储在DevelopmentPage中的侧边栏的状态以及作为组件存在于developmentPage和子页面中的子项和侧边栏的状态根据在侧边栏中单击的选项卡而改变？

**TLDR：**如何让侧边栏在开发页面的所有导航组件中持久化。

P.S很抱歉这么长的帖子，如果你需要我提供或删除不必要的代码或信息，请让我知道。