Question

<HeaderContainer>
  <Switch>
    <Route exact path='/counters' component={ParentCounterContainer}/>
    <Route exact path='/about' component={AboutContainer} />
    <Route exact path='/' component={HomeContainer}/>
    <Route component={ErrorContainer} />
  </Switch>
</HeaderContainer>

如何将ErrorContainer以外的所有路由都包装在HeaderContainer中？

Answer 1

只需将404页面组件Route放置在HeaderContainer之外。

<Switch>
  <HeaderContainer>
      <Route exact path='/counters' component={ParentCounterContainer}/>
      <Route exact path='/about' component={AboutContainer} />
      <Route exact path='/' component={HomeContainer}/>
  </HeaderContainer>
  <Route component={ErrorContainer} />
<Switch>

Answer 2

import React from 'react';
import {Route, Redirect} from 'react-router-dom';

const CustomRoute = ({
    component: Component,
    ...rest
}) => (
    <Header />
    <Route {...rest} component={(props) => {return <Component {...props} />}}/>
)

export default CustomRoute;

尝试这样的“自定义路由”。可能有用。

应用路由器

  <Switch>
    <CustomRoute exact path='/counters' component={ParentCounterContainer}/>
    <CustomRoute exact path='/about' component={AboutContainer} />
    <CustomRoute exact path='/' component={HomeContainer}/>
    <Route component={ErrorContainer} />
  </Switch>

如何隐藏404页面的页眉

2 个答案: