使用 react-router 在特定页面上排除 <Header /> 组件

Question

这是一个工作代码：

const AppRouter = () => (
<BrowserRouter>
  <div>
    <Header />
    <Switch>
      <Route path="/" component={DashboardPage} exact={true} />
      <Route path="/:id" component={ViewerPage} /> // <-- Exclude Header component from this page
      <Route path="/create" component={CreatePage} />
      <Route path="/edit/:id" component={EditPage} />
      <Route path="/help" component={HelpPage} />
      <Route component={NotFoundPage} />
    </Switch>
  </div>
</BrowserRouter>
);

export default AppRouter;

我似乎无法弄清楚如何从 ViewerPage 组件页面中排除 Header 组件。有没有办法做到这一点？

Answer 1

在我的上一个项目中有完全相同的要求，我采用了将标头拆分为自己的组件并使用 React Fragments 的方法。地道的！

import React, { Fragment } from 'react'
// ...

const App = () => (
  <div>
    <Switch>
      <Route path='/no-header-route' component={NoHeaderComponent} />   // Route without header
      <Fragment>            // This is the key
        <Header/>           // Header is in its own component
        <Route path='/route-1' component={Comp1}/>  // Route with header
        <Route path='/route-2' component={Comp2}/>  // Route with header
      </Fragment>
    </Switch>
  </div>
)

Answer 2

包提供的withRouter高阶组件react-router将使您可以访问位置对象。一旦你有了它，你就可以通过短路有条件地呈现标题。

import {withRouter} from 'react-router'

const App = ({location}) => (
  <div>
    {location.pathname !== '/exclusion-path' && <Header/>}
    <Switch>
      ...
    </Switch>
  </div>
)

export default withRouter(App)

或排除多条路径...

const exclusionArray = [
  '/path-one',
  '/another-path',
]

const App = ({location}) => (
  <div>
    {exclusionArray.indexOf(location.pathname) < 0 && <Header/>}
    <Switch>
      ...
    </Switch>
  </div>
)

如果您正在做任何严肃的事情，我建议您对上下文提供的值使用上下文 api 和短路。如果是这种情况并且您需要一些指导，我很乐意向您解释。

PS 如果你想用 alpha Hooks API 来做，我会非常兴奋。

编辑：为了解决共同问题。

将您的路由器移到 App 组件之外。

import {BrowserRouter as Router} from 'react-router-dom'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <Router>
    <App/>
  </Router>,
  document.getElementById('render-target')
)