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

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

When I route to any other path besides '/', I want to hide the Homepage component. However, I have no idea how to do this, and my google search has proved fruitless.

您好。您的架构有缺陷。

        <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 的 child，以便 header 在任何地方都处于活动状态。页脚等相同

Answer 2

如果您只想在路径 / 上显示组件 Homepage 而在其他地方不显示，请将您的道具 component 更改为 render 并渲染 Placeholder和 Homepage.

或者创建一个组件来呈现两者并将其作为组件传递。

Doc for render props.

<BrowserRouter>
    <div className='App'>
        <MainHeader />
        <Route exact path='/' render={props => (
            <React.Fragment>
                <Homepage/>
                <Placeholder/>
            </React.Fragment>
        )}/>
        <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>

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

hide a component inside BrowserRouter in React when i move to a new route

reactjs

react-router-dom