Question

我正在编写具有多个路由的React应用，我也有页眉和页脚组件，这些组件在所有组件上都可见。但是现在我想隐藏特定路线的页脚组件。

<Header />
        <Switch>
          <Route path={routes.home} exact component={Home} />
          <Route path={routes.office} component={Office} />
          <Route path={routes.park} exact component={Park} />
          ...
          ...
          ...
          <Route path={routes.shopping} component={Shopping} />
        </Switch>
    <Footer />

因此总是显示页眉和页脚组件。但是，现在我希望除了购物以外的所有路线都可见页脚组件，该怎么办？

Answer 1

您可以从react路由器获取活动路由，并根据此信息决定是否渲染页脚。

不了解您的体系结构，但此示例可能会为您提供一些线索。

class Example extends Component {
  render() {
    const { pathname } = this.props.location;
    return (
      <div>
        *header, routes, etc...*
        {pathname !== 'shopping' && <Footer />}
      </div>
    )
  }
}

否：如果您的组件没有定位道具，则可以从react路由器中使用withrouter hoc。

Answer 2

有几种方法可以做到这一点，一种方法是：

首先通过道具将要隐藏的路线作为数组传递：

<Router>
    <Header hideRoutes={[routes.shopping]} />
    <Switch>
        <Route path={routes.home} exact component={Home} />
        <Route path={routes.office} component={Office} />
        <Route path={routes.park} exact component={Park} />
        {/*moreRoutes*/}
        <Route path={routes.shopping} component={Shopping} />
    </Switch>
    <Footer hideRoutes={[routes.shopping]} />
</Router>

然后在页眉和页脚组件中检查隐藏路线的路径名，然后在适当时通过传递空div来隐藏

const Header = (props)=>{
    const {hideRoutes , location:{pathname}} = props
    let shouldHide = false
    hideRoutes.some(hideRoute => {
        if (pathname === hideRoute)
            return shouldHide = true
    })
    if (shouldHide) 
        return <div/>

    //proceed to return header
}

Answer 3

在不使用渲染道具或 useRouteMatch 钩子的情况下执行此操作的最佳方法是为您不想要页眉或页脚的页面使用一个特定的路由，以及一个“包罗万象的” " 将匹配所有其他路由的路由。然后，您可以使用嵌套的 Switch 语句来处理其余的应用程序路由。

在下面的示例中，我有一个 '/auth' 路由，它只会呈现 Auth 组件而没有其他内容。在应用程序的其余部分（在用户登录之后），我希望 Navbar 和 Sidebar 组件显示在所有路由上，因此它们位于没有设置“path”属性的“catch-all”路由中。这意味着它将为除“/auth”之外的所有路由触发（因为 /auth 在它之前声明）。

<Router>
  <div className="App">
    <Switch>
      {/* The route which will not render the sidebar and navbar components */}
      <Route path="/auth">
        <Auth/>
      </Route>
      {/* Catch-all route that will match everything except /auth and render Sidebar and Navbar on all pages */}
      <Route>
        <Sidebar/>
        <Navbar/>
        {/* The rest of the routes for the application */}
        <Switch>
          <Route exact path="/">
            <Home/>
          </Route>
          <Route path="/about">
            <About/>
          </Route>
          <Route path="/projects">
            <Projects/>
          </Route>
        </Switch>
      </Route>
    </Switch>
  </div>
</Router>

除一条特定路线外，所有路线的渲染组件

3 个答案: