web-dev-qa-db-fra.com

Réagir: masquer un composant sur une route spécifique

Nouveau pour réagir:

J'ai un <Header /> Composant que je souhaite masquer uniquement lorsque l'utilisateur visite une page spécifique.

La façon dont j'ai conçu mon application jusqu'à présent est que le <Header /> Le composant est non rendu à nouveau lors de la navigation, seul le contenu de la page l'est, ce qui donne une expérience vraiment fluide.

J'ai essayé de restituer l'en-tête pour chaque itinéraire, ce qui faciliterait la dissimulation, mais j'obtiens ce vilain problème de re-rendu à chaque fois que je navigue.

Donc, en gros, existe-t-il un moyen de restituer un composant uniquement en entrant et en sortant d'une route spécifique?

Sinon, quelle serait la meilleure pratique pour atteindre cet objectif?

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>
);
reactjsreact-routerreact-css-modules
5
Yannick

Vous pouvez vous fier à l'état pour effectuer le nouveau rendu.

Si vous naviguez à partir de l'itinéraire shouldHide puis this.setState({ hide: true })

Vous pouvez envelopper votre <Header> Dans le rendu avec un conditionnel:

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

Ou vous pouvez utiliser une fonction:

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

Et dans la méthode de rendu:

{this._header()}

Je n'ai pas essayé react-router, mais quelque chose comme ça pourrait fonctionner:

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

Et vous devez appeler manuellement la fonction dans Art:

this.props.hideHeader()

3
Dan

Vous pouvez l'ajouter à toutes les routes (en déclarant un chemin non exact) et le cacher dans votre chemin spécifique:

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

puis dans la méthode de rendu Header:

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

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