Как сделать компонент только для одного маршрута? - PullRequest
Новая
       5

Как сделать компонент только для одного маршрута?

0 голосов
/ 12 ноября 2018

Я пытаюсь удалить компонент Header только со страницы маршрута. Как я могу сделать это в React router 4?

это мои маршруты 

const AppRouter: any = () => (
      <BrowserRouter>
        <React.Fragment>
          <Header />
          <Switch>
            <Route path={LOOP_MAIN_ROUTE} component={LandingPage} exact/>
            <Route path={LOOP_LOGIN_ROUTE} component={LoginPage} exact/>
            <ProtectedRoute path={LOOP_SEARCH_ROUTE} component={SearchPage} />
            <ProtectedRoute path={LOOP_OFFER_ROUTE} component={Offer} exact />
            <ProtectedRoute path={LOOP_OFFER_APPROVAL} component={OfferApproval} exact />
            <ProtectedRoute path={LOOP_OFFER_CONFIRMATION} component={OfferConfirmation} exact />
          </Switch>
        </React.Fragment>
      </BrowserRouter>
    );

export default AppRouter;

Ответы [ 2 ]

0 голосов
/ 12 ноября 2018

Header можно условно отобразить как маршрут: 

<Route render={
  ({ location: { pathname } }) => pathname !== LOOP_MAIN_ROUTE && <Header/>
}/>
0 голосов
/ 12 ноября 2018

Один из способов сделать это - использовать matchPath .Например, в вашем компоненте Header: 

import React from "react";
import {LOOP_MAIN_ROUTE} from "whereverYouHaveThisConstant";
import { withRouter, matchPath } from 'react-router-dom';
const Header = (props) => {
   const suppressHeader = matchPath(props.location.pathname, {path: LOOP_MAIN_ROUTE});
   if (suppressHeader ) {
      return null;
   }
   return <>your header stuff</>;
};
export default withRouter(Header);
...