React:隐藏特定路由上的组件 [英] React: Hide a Component on a specific Route

问题描述

React 新手:

我有一个

组件，我想仅在用户访问特定页面时隐藏它.

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

组件导航时不重新渲染，只有页面内容，所以它提供了非常流畅的体验.

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

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

如果不是，实现此目标的最佳做法是什么?

App.js:

class App 扩展组件 {使成为() {返回 (<浏览器路由器><div className="应用程序"><框架><画布/><标题/><主要/><导航栏/></帧>

</BrowserRouter>);}}

Main.js:

const Main = () =>(<开关><路由精确的 activeClassName="active" path="/" component={Home}/><路由精确的 activeClassName="active" path="/art" component={Art}/><路由精确的activeClassName="active" path="/about" component={About}/><路由精确 activeClassName="active" path="/contact" component={Contact}/></开关>);

解决方案

我也是 React 新手，但遇到了这个问题.接受答案的基于 react-router 的替代方法是使用 withRouter，它包装您要隐藏的组件并为其提供 location道具(其中包括).

import { withRouter } from 'react-router-dom';const ComponentToHide = (props) =>{const { 位置 } = 道具；if (location.pathname.match(/routeOnWhichToHideIt/)){返回空；}返回 (<ComponentToHideContent/>)}const ComponentThatHides = withRouter(ComponentToHide);

请注意文档中的警告:

<块引用>

withRouter 不像 React Redux 那样订阅位置变化connect 用于状态更改.相反，在位置之后重新渲染更改从组件传播出去.这意味着withRouter 不会在路由转换上重新渲染，除非它的父级组件重新渲染.

尽管有此警告，但对于与 OP 非常相似的用例，这种方法似乎对我有用.

New to React:

I have a <Header /> Component that I want to hide only when the user visit a specific page.

The way I designed my app so far is that the <Header /> Component is not re-rendered when navigating, only the page content is, so it gives a really smooth experience.

I tried to re-render the header for every route, that would make it easy to hide, but I get that ugly re-rendering glitch each time I navigate.

So basically, is there a way to re-render a component only when going in and out of a specific route ?

If not, what would be the best practice to achieve this goal ?

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

解决方案

I'm new to React too, but came across this problem. A react-router based alternative to the accepted answer would be to use withRouter, which wraps the component you want to hide and provides it with location prop (amongst others).

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

Note though this caveat from the docs:

withRouter does not subscribe to location changes like React Redux’s connect does for state changes. Instead, re-renders after location changes propagate out from the component. This means that withRouter does not re-render on route transitions unless its parent component re-renders.

This caveat not withstanding, this approach seems to work for me for a very similar use case to the OP's.

这篇关于React:隐藏特定路由上的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！