Как на одной из страниц убрать footer?

Question

[Nikolay Matyushkin]

Привет комрады.

есть такой кусок кода в моей App.jsx

<Fragment>
				<Header />
				<Container>
					<Switch>
						<Route exact path="/" component={Menu} />
						<Route path="/catalog/:id" component={Catalog} />
						<Route path="/delivery" component={Delivery} />
						<Route path="/pay" component={Pay} />
						<Route path="/about" component={About} />
						<Route path="/basket" component={Basket} />
						<Route component={NotFound} />
					</Switch>
				</Container>
				<Footer />
				<ScrollReset />
			</Fragment>

В зависимости от Route отрисовываем тот или иной компонент в Container. Header и Footer отображаются всегда. Как сделать, чтобы например зайдя на страницу с "/basket" отображались только Header и Container. Короче говоря как запретить отображение Footer на отдельно взятом роуте?

Answer 1

[Антон Спирин]

Условный рендеринг.

Оберните App в withRouter:
export default withRouter(App);

Добавьте условие:

const shouldShowFooter = this.props.location.pathname !== '/basket';

Отображайте футер по условию:
{shouldShowFooter && <Footer />}