时间戳

首页 > 解决方案 > React：隐藏特定路由上的组件

reactjs - React：隐藏特定路由上的组件

问题描述

新反应：

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

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

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

所以基本上，有没有办法只在进出特定路线时重新渲染组件？

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

应用程序.js：

class App extends Component {

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

主.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>
);

标签： reactjsreact-routerreact-css-modules

解决方案

我也是 React 的新手，但遇到了这个问题。react-router已接受答案的基于替代方案是使用withRouter，它包装您要隐藏的组件并为其提供location道具（以及其他）。

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);

请注意文档中的这个警告：

withRouter 不像 React Redux 的 connect 那样订阅位置更改来进行状态更改。相反，在位置更改从组件传播出去之后重新渲染。这意味着 withRouter 不会在路由转换时重新渲染，除非其父组件重新渲染。

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

推荐阅读