reactjs - react : Hide a Component on a specific Route

Question

React 新手:

我有一个<Header />我想仅在用户访问特定页面时隐藏的组件。

到目前为止，我设计应用程序的方式是 <Header />组件导航时不会重新渲染，只有页面内容会重新渲染，因此它提供了非常流畅的体验。

我尝试重新渲染每条路线的标题，这样可以轻松隐藏，但每次导航时都会遇到丑陋的重新渲染故障。

那么基本上，有没有办法仅在进出特定路线时重新渲染组件？

如果没有，实现此目标的最佳实践是什么？

应用程序.js:

class App extends Component {

  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Frame>
            <Canvas />
            <Header />
            <Main />
            <NavBar />
          </Frame>
        </div>
      </BrowserRouter>
    );
  }
}

Main.js:

const Main = () => (
  <Switch>
    <Route exact activeClassName="active" path="/" component={Home} />
    <Route exact activeClassName="active" path="/art" component={Art} />
    <Route exact activeClassName="active" path="/about" component={About} />
    <Route exact activeClassName="active" path="/contact" component={Contact} />
  </Switch>
);

Answer 1

我也是 React 新手，但遇到了这个问题。基于 react-router 的可接受答案的替代方案是使用 withRouter，它包装您想要隐藏的组件并为其提供 location Prop (除其他外)。

import { withRouter } from 'react-router-dom';    
const ComponentToHide = (props) => {
  const { location } = props;
  if (location.pathname.match(/routeOnWhichToHideIt/)){
    return null;
  }

  return (
    <ComponentToHideContent/>
  )
}

const ComponentThatHides = withRouter(ComponentToHide);

请注意 the docs 中的这个警告:

withRouter does not subscribe to location changes like React Redux’sconnect does for state changes. Instead, re-renders after locationchanges propagate out from the component. This means thatwithRouter does not re-render on route transitions unless its parentcomponent re-renders.

尽管有这个警告，这种方法似乎对我来说适用于与 OP 非常相似的用例。