Reactjs 当我移动到新路由时，在React中隐藏BrowserRouter中的组件

所以我有一个这样的布局：

             <BrowserRouter>
                 <div className='App'>
                     <MainHeader />
                     <Homepage />
                     <Route exact path='/' component={Placeholder} />
                     <Route path='/placeholder' component={Placeholder} />
                     <Route path='/address_checker' component={Address_Checker} />
                     <Route path='/availability_checker' component={Availability_Checker} />
                     <Route path='/usage_checker' component={Usage_Checker} />
                     <Route path='/device_checker' component={Device_Checker} />
                     <Route path='/payment_checker' component={Payment_Checker} />
                     <Route path='/result' component={Result} />

                     <Route path='/login' component={Login} />
                 </div>
             </BrowserRouter>

当我路由到“/”以外的任何其他路径时，我想隐藏主页组件。然而，我不知道如何做到这一点，我的谷歌搜索结果证明是徒劳的

当我路由到“/”以外的任何其他路径时，我想隐藏 主页组件。然而，我不知道如何做到这一点，我的 谷歌搜索被证明是徒劳的

你好。你的架构有缺陷

        <BrowserRouter>
             <div className='App'>
                 <Route exact path='/' component={Homepage} />
                 <Route path='/placeholder' component={Placeholder} />
                 <Route path='/address_checker' component={Address_Checker} />
                 <Route path='/availability_checker' component={Availability_Checker} />
                 <Route path='/usage_checker' component={Usage_Checker} />
                 <Route path='/device_checker' component={Device_Checker} />
                 <Route path='/payment_checker' component={Payment_Checker} />
                 <Route path='/result' component={Result} />

                 <Route path='/login' component={Login} />
             </div>
         </BrowserRouter>

---

试试这个。只需将路由组件设置为

MainHeader

的子组件，这样报头在任何地方都是活动的。页脚等也一样。

如果您只想在路径

/

上显示组件

主页

，而不想在其他地方显示，请将您的道具

组件

更改为

渲染

并渲染

占位符

和

主页

或者创建一个同时呈现这两个对象的组件，并将其作为组件传递

(
)}/>

如果页眉和页脚中有一些项目应该侦听路由，该怎么办？