Реагируйте: Скрыть компонент на определенном маршруте - PullRequest
Новая
       26

Реагируйте: Скрыть компонент на определенном маршруте

0 голосов
/ 09 июня 2018

New to React:

У меня есть <Header /> компонент, который я хочу скрыть, только когда пользователь заходит на определенную страницу .

То, как я до сих пор проектировал свое приложение, заключается в том, что <Header /> Компонент не перерисовывается при навигации , только содержимое страницы, так что это дает действительно плавный опыт.

Я пытался перерисовывать заголовок для каждого маршрута, что бы его было легко скрыть, но я получал этот уродливый сбой перерисовки при каждой навигации.

Так что в основном, есть ли способ перерисовать компонент только при входе и выходе из определенного маршрута?

Если нет, то каков будет лучший метод для достижения этой цели?

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

Ответы [ 3 ]

0 голосов
/ 09 июня 2018

Вы можете положиться на состояние при повторном рендеринге.

Если вы переходите с маршрута shouldHide, тогда this.setState({ hide: true })

Вы можете обернуть <Header> в рендере с помощьюусловие: 

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

Или вы можете использовать функцию: 

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

А в методе рендеринга: 

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

И вам нужно вручную вызвать функцию внутри Art:

this.props.hideHeader()

0 голосов
/ 01 апреля 2019

Я тоже новичок в React, но столкнулся с этой проблемой.Альтернативой принятому ответу на основе react-router будет использование withRouter, который оборачивает компонент, который вы хотите скрыть, и предоставляет ему location prop (среди прочих). 

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.

0 голосов
/ 09 июня 2018

Вы можете добавить его ко всем маршрутам (объявив не точный путь) и скрыть его в вашем конкретном пути: 

<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
  }
}
...