25

新反应：

我有一个<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>
);
4

5 回答 5

27

我也是 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 非常相似的用例。

于 2019-03-31T22:39:09.763 回答
11

从 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>
}
于 2020-04-30T18:42:02.117 回答
10

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

<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
  }
}
于 2018-06-09T18:35:07.337 回答
4

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

如果您从路线导航，shouldHide那么this.setState({ hide: true })

您可以使用条件包装您<Header>的渲染：

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

或者你可以使用一个函数：

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

在渲染方法中：

{this._header()}

我没有尝试过 react-router，但是这样的东西可能会起作用：

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

而且你需要手动调用Art里面的函数：

this.props.hideHeader()

于 2018-06-09T18:36:56.390 回答
0 
{location.pathname !== '/page-you-dont-want' && <YourComponent />}

这将检查路径名，如果它不是您不希望组件出现的页面，它将不会显示它，否则将显示它。

于 2021-12-31T09:32:35.483 回答