web-dev-qa-db-fra.com

Changement d'état lors du changement de route Next.js

Salut, je bascule une navigation dans next.js, cela fonctionne bien, c'est juste que je veux que la navigation se referme lorsque l'itinéraire change.

Par exemple, si je suis sur la page d'accueil et que vous basculez la navigation, la navigation s'ouvre et affiche un lien vers la page à propos. Si je clique sur ce lien, je suis redirigé vers la page à propos comme prévu - mais la navigation est toujours ouverte!

J'ai essayé quelques choses - je pense que je veux utiliser onRouteChangeComplete (url) mais j'ai du mal à mettre à jour l'état navActive.

Mon fichier page.js:

class Page extends Component {
  state = {
    navActive: false
  };

  toggle = () => {
    this.setState({
      navActive: !this.state.navActive
     });
  };

  render() {
    return (
      <ThemeProvider theme={theme}>
        <StyledPage className="full-page-wrapper">
          <Meta />
          <Header navActive={this.state.navActive} toggle={this.toggle} />
          <PrimaryContent>{this.props.children}</PrimaryContent>
          <GlobalStyle />
        </StyledPage>
      </ThemeProvider>
    );
  }
}

Ensuite, mon fichier d'en-tête:

class Header extends React.Component {
  render() {
    return (
      <HeaderSide

        <HeaderToggleBar onClick={() => this.props.toggle()} />

      </HeaderSide>
    );
  }
}

L'application démarre donc avec l'état navActive false, en cliquant sur l'élément HeaderToggleBar, vous ouvrez et fermez la navigation. Mais je dois fermer la navigation lorsque l'itinéraire change. Je suppose que je pourrais mettre l'événement de clic sur les éléments de navigation dans l'en-tête (donc cliquer sur une nouvelle page bascule) mais cela semble un peu excessif.

Je vous remercie.

javascriptreactjsnext.js
5
user3725781

Je crois que vous devez lier votre rappel. Vous devrez peut-être également ajouter un constructeur. Voici un extrait d'un projet qui accepte les téléchargements de fichiers.

    class Files extends React.Component {
        // define your constructor and call super before setting state vars
        constructor(props){
            super(props);
            this.state = {
                uploadStatus: false
            }
            // Bind your callback
            this.handleUploadImage = this.handleUploadImage.bind(this);
            // set other initial vars if needed
        }

        handleUploadImage(files){
            // do stuff with the files
        }

        render () {
            return (
                <div id="fileContainer">
                    <MyDropzone id={this.props.project._id} onDrop={this.handleUploadImage}>
                        {({getRootProps}) => <div {...getRootProps()} />}
                    </MyDropzone>
                </div>
            )
        }
    }
0
Brock