Question

所以我有这样的布局：

             <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>

当我路由到“ /”以外的其他任何路径时，我想隐藏“主页”组件。但是，我不知道该怎么做，事实证明我的Google搜索无济于事。

Answer 1

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

你好您的架构有缺陷。

        <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的子代，这样头就可以在任何地方都处于活动状态。页脚等也一样

Answer 2

如果您只想在路径Homepage上显示组件/，而在其他地方不显示，则将prop component更改为render并渲染Placeholder和{ {1}}。

或创建一个同时渲染两者的组件并将其作为组件传递。

Doc for render props.

Homepage

当我移动到新路线时，在React中的BrowserRouter内部隐藏一个组件

2 个答案: