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

Question

新反应：

我有一个

组件，我只想在用户访问特定页面时隐藏该组件。

App.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-router的替代答案是使用wishrouter，它包装要隐藏的组件并为其提供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);

请注意文档中的警告：

Wisrouter不像React Redux的connect订阅状态更改那样订阅位置更改。相反，在位置更改从组件传播出去后重新呈现。这意味着Wisrouter不会在路由转换时重新呈现，除非它的父组件重新呈现。

这个警告是不成立的，这种方法似乎对我来说对于一个非常类似于OP的用例是有效的。