Скрытие общего компонента на странице Not Found в React-Router

Question

В моем приложении реакции есть общий заголовок, который находится за пределами моих маршрутов, а другие компоненты загружаются на основе маршрутизации.

      <React.Fragment>
            <Header />
            <div className="container dflex">
              <Switch>
                <Route path="/money-transfer" component={MoneyTransfer} />
                <Redirect from="/" to="/money-transfer" exact />
                <Route path="/dmt" exact component={MyDmt} />
                <Route component={NoFound} />
              </Switch>
          </div>
      </React.Fragment>

Я также хочу скрыть свой заголовок при визуализации страницы NoFound.Что может быть лучшим решением для этого?

Answer 1

Попробуйте,

  <React.Fragment>
                 let HideHeader = NoFound ? null : <Header />
                 {HideHeader}
                <div className="container dflex">
                  <Switch>
                    <Route path="/money-transfer" component={MoneyTransfer} />
                    <Redirect from="/" to="/money-transfer" exact />
                    <Route path="/dmt" exact component={MyDmt} />
                    <Route component={NoFound} />
                  </Switch>
              </div>
          </React.Fragment>

Answer 2

Вы можете Redirect к определенному маршруту, если не найдено ни одного маршрута, а затем проверить этот маршрут в Header, чтобы скрыть этот компонент.

 <Switch>
    <Route path="/money-transfer" component={MoneyTransfer} />
    <Redirect from="/" to="/money-transfer" exact />
    <Route path="/dmt" exact component={MyDmt} />
    <Route component={NoFound} />
 </Switch>

function NoFound() {
  return <Redirect to="/notfound" />;
}

// Header.js

const Header = props => {
  const { location } = props;

  if (location.pathname.match(/notfound/)) {
    return <NotFoundRoute />;
  }
  return <h3>I am the Header</h3>;
};

export default withRouter(Header);

// NotFoundRoute.js

function NotFoundRoute() {
  return <div>No Route Found</div>;
}

Пример рабочего кода коды кодовой ссылки

Надеюсь, это поможет !!!