使用 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

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

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 并在上下文提供的值上短路。如果是这种情况，并且您需要一些指导，我很乐意向您解释。

附：如果你想用 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')
)

Answer 3

1- 类似，在 Header.js 中

  import {withRouter} from 'react-router-dom';

        class Header extends Component {
          render() {
            if (this.props.location.pathname === '/') {
              return null
            }
            return (
              // other stuff
            );
          }
        }
  export default withRouter(Header);

注意，withRouter 可以随着不同的 React 路由器版本而不同。但是思路是一样的：用ViewerPage的路径名检查你的路径名，如果是路径就不要显示Header...

2- 其他方法是用“redux”做同样的事情

所以每当加载 ViewerPage 时，调度一个动作。 在 ViewerPage.js 中

class ViewerPage extends Component {
          componentDidMount() {
            this.props.updateShouldDisplayHeader(false);
          }
          componentWillUnmount(){
             this.props.updateShouldDisplayHeader(true);
           }
        }

在 Header.js 中

class Header extends Component {
          render() {
            if(!this.props.shouldDisplayHeader) {
               return null;
            }
            return (
              // other stuff
            );
          }
        }

我想你已经知道如何在 redux 上创建 action 和使用 reducers

Answer 4

在您的路由器文件中，在 <Switch> 之前调用 useRouteMatch()

export Routes = (
{useRouteMatch("/specific-route")?.isExact ? (
          <Header />
        ) : null}

<Switch>
  <Route path="other/path" component={Other}
  ...
</Switch>
);

或者，致电withRouter() 以直接访问match、location 和history。

export const AuthenticatedRoutes = withRouter(() => (
  {location.pathname !== `/special-url` ? (
    <Header />
  ) : null}

  <Route path="/special-url" component={Special}
  <Route path="/other" component={Other} 
));

export Routes = (
  {useRouteMatch("/specific-route")?.isExact ? (
    <Header />
  ) : null}
            
  <Switch>
    <Route component={AuthenticatedRoutes}          
  </Switch>
);