скрыть компонент внутри BrowserRouter в React при переходе на новый маршрут

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

Если вы хотите отобразить компонент Homepage только по пути / и нигде больше, измените ваш пропеллер component на render и выполните рендеринг Placeholder и Homepage.

Или создайте компонент, который отображает оба и передает его как компонент.

Документ для рендеринга реквизита.

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

Answer 2

Когда я направляю к любому другому пути, кроме '/', я хочу скрыть компонент Homepage.Однако я понятия не имею, как это сделать, и мой поиск в Google оказался бесплодным.

Здравствуйте.Ваша архитектура несовершенна.

        <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, чтобы заголовок был активным везде.То же самое для нижнего колонтитула и т. Д.