Reactjs 反应：隐藏特定管线上的组件

新反应：

我有一个

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

到目前为止，我设计应用程序的方式是，导航时，

组件不会重新呈现，只有页面内容才是，因此它提供了一种真正流畅的体验

我试图重新渲染每条路线的标题，这会使它很容易隐藏，但每次导航时我都会遇到可怕的重新渲染故障

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

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

App.js：

class App extends Component {

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

类应用程序扩展组件{
render（）{
返回(
);
}
}

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

const Main=（）=>(
);

您可以将其添加到所有路由中（通过声明非精确路径），并将其隐藏在您的特定路径中：

<Route path='/' component={Header} /> // note, no exact={true}

---

可以依靠状态来执行重新渲染

如果您从route

shoulldhide

导航，则

this.setState（{hide:true}）

您可以在渲染中使用以下条件将

包装：

{
  !this.state.hide &&
  <Header>
}

我没有尝试过react路由器，但类似的方法可能会奏效：

class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      hide: false
    }
  }

  toggleHeader = () => {
    const { hide } = this.state
    this.setState({ hide: !hide  })
  }

  render() {

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

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

类应用程序扩展组件{
建造师（道具）{
超级（道具）
此.state={
隐藏：假
}
}
toggleHeader=（）=>{
const{hide}=this.state
this.setState（{hide:！hide}）
}
render（）{
常量Main=（）=>(
}
/>
);
返回(
);
}
}

您需要手动调用Art内部的函数：

---

this.props.hideHeader（）

我也不太会做出反应，但遇到了这个问题。基于

react router

的可接受答案的替代方案是使用

with router

，它包装要隐藏的组件，并为其提供

位置

道具（以及其他道具）

从“react router dom”导入{withRouter}；
常量组件隐藏=（道具）=>{
const{location}=props；
if（location.pathname.match（/routeOnWhichToHideIt/）{
返回null；
}
返回(
)
}
const componentthathinds=withRouter（ComponentToHide）；

请注意，尽管有以下警告：

withRouter不会像React Redux那样订阅位置更改 connect不支持状态更改。而是在定位后重新渲染 更改会从组件传播出去。这意味着 withRouter不会在路由转换时重新渲染，除非其父级 组件重新渲染

---

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

因为React Router 5.1有一个钩子useLocation，它让您可以轻松访问当前位置

import { useLocation } from 'react-router-dom'

function HeaderView() {
  let location = useLocation();
  console.log(location.pathname);
  return <span>Path : {location.pathname}</span>
}

从'react router dom'导入{useLocation}
函数HeaderView（）{
让location=useLocation（）；
console.log（location.pathname）；
返回路径：{location.pathname}
}

什么重新渲染故障？就像整个应用程序重新加载一样。导航时闪烁10毫秒我确实用一些代码编辑了我的问题，因此我设计布局和路线的方式更加清晰。也许问题就出在这里…所以，我必须从组件更新应用程序状态。。这就是我想要隐藏标题的那个。。。然后将状态设置为隐藏：在其他路径中为false？我有点不清楚您是如何在这里进行路由的。你在什么地方更改了内容吗？当你点击路由时会发生什么？我第一次使用路由器。。。我决定将所有页面内容放入路由器，并使用

path=“/”component={Home}

切换内容<代码>路径=“/about”组件={about}等。。。如果我不想在一条特定的路线上摆脱它，那就太好了。。。所以这也是一个设计问题我猜你能把路由器包连接起来吗？我以前没用过路由器，所以这可能不适用。但您可以做的是将修改应用程序头状态的函数传递给路由。让子函数调用该函数并直接修改父函数的头状态？嗯，也许不只是因为这个…谢谢。我确实用更多的细节编辑了我的问题。。。该解决方案仍然适用吗？通常路径=“/”是Web应用程序的主页。我认为组件是布局组件更有意义，组件内部应该是显示标题或不显示标题的逻辑。由于React Router 5.1，可以使用钩子useLocation（）。这个答案省去了我对这个问题的疑惑。谢谢

{this._header()}

class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      hide: false
    }
  }

  toggleHeader = () => {
    const { hide } = this.state
    this.setState({ hide: !hide  })
  }

  render() {

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

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

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

import { useLocation } from 'react-router-dom'

function HeaderView() {
  let location = useLocation();
  console.log(location.pathname);
  return <span>Path : {location.pathname}</span>
}