Question

React新手：

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

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

我试图为每条路线重新渲染标题，这样可以很容易地隐藏，但每次导航时我都会遇到难看的重新渲染故障。

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

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

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 5.1开始，就有了hook useLocation，它使您可以轻松访问当前位置。

with open(file_name) as file_name_ref:
    csv_gen = (row for row in file_name_ref)

Answer 2

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

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

然后在Header渲染方法：

render() {
  const {match: {url}} = this.props;

  if(url.startWith('/your-no-header-path') {
    return null;
  } else {
    // your existing render login
  }
}

Answer 3

您可以依靠状态进行重新渲染。

如果您从路线shouldHide然后this.setState({ hide: true })

导航

您可以使用条件将<{1}}包装在渲染中：

<Header>

或者你可以使用一个功能：

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

在渲染方法中：

_header = () => {
  const { hide } = this.state
  if (hide) return null
  return (
    <Header />
  )
}

我没有尝试过react-router，但这样的事情可能有用：

{this._header()}

您需要在Art：

中手动调用该函数

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

Answer 4

我也是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);

请注意，尽管来自the docs的这一警告：

withRouter不订阅位置更改，例如React Redux的 connect用于状态更改。而是在定位后重新渲染更改从组件传播出去。这意味着 withRouter不会在路由转换时重新呈现，除非其父级重新渲染组件。

这种警告并不能忍受，对于与OP非常相似的用例，这种方法似乎对我有用。

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

4 个答案: