Блог

У меня есть навигационный компонент бокового ящика, который открывается при нажатии на значок гамбургера (просмотр с мобильных устройств).

Когда компонент открыт, он показывает навигационные ссылки. Проблема в том, что боковой ящик остается открытым, даже когда нажимается ссылка и загружается новая страница. Каков наилучший способ закрыть боковой навигатор при нажатии на навигационную ссылку? Редактировать: добавлен componentDidUpdate в app.js , боковой ящик по-прежнему не закрывается

 //side-drawer.jsx

import React from 'react'
import './side-drawer.css'
import { Link } from 'react-router-dom';

const SideDrawer = props => {

    let drawerClasses = 'side-drawer';
    if (props.show){
        drawerClasses = 'side-drawer open';
    }

    return(
    <nav className={drawerClasses}>
        <div className="side-nav">
            <Link className="side-items" to="/about">ABOUT</Link>
            <Link className="side-items" to="/contact">CONTACT US</Link>
        </div>
    </nav>
    );
};

export default SideDrawer;
  

 //app.js
class App extends React.Component {
  state = {
    sideDrawerOpen: false
  };

  drawerToggleClickHandler = () => {
    this.setState((prevState) => {
      return {sideDrawerOpen: !prevState.sideDrawerOpen};
    });
  };


  componentDidUpdate(prevProps) {
  const { location } = this.props;
  if (location !== prevProps.location amp;amp; this.state.sideDrawerOpen) {
    this.setState({ sideDrawerOpen: false });
  }
}

render(){

 return (
    <div style={{height: '100%'}}>
      <Header drawerClickHandler={this.drawerToggleClickHandler}/>
      <SideDrawer show={this.state.sideDrawerOpen}/>

        <Switch>
          <Route exact path='/' component={Homepage}/>
          <Route exact path='/about' component={About}/>
          <Route exact path='/contact' component={Contact}/>
        </Switch>
      <Footer/>

    </div>
  );
  }
}

  

 //.side-drawer.css
.side-drawer {
    height: 100%;
    background: linen;
    box-shadow: 1px 0px 7px rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    width: 70%;
    max-width: 400px;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.3s ease-out;
    
  }

.side-drawer.open{
    transform: translateX(0);
}

    .side-nav{
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }  

    .side-items {
        margin: 0.5rem auto;
        
    }

    .side-items:hover{
        text-decoration-line: overline underline;
        color: #99bbff; 
        }

@media (min-width: 769px){
    .side-drawer-open{
        display: none;
    }
}
  

Ну, если вы условно применяете имена классов к компоненту SideDrawer, вы можете сделать это вместо этого…

 <nav className={props.show ? 'side-drawer open' : 'side-drawer'}>
  

Или вы могли бы условно показать компонент в компоненте приложения с помощью…

 return (
    <div style={{height: '100%'}}>
      <Header drawerClickHandler={this.drawerToggleClickHandler}/>
        {
          this.state.sideDrawerOpen amp;amp; <SideDrawer />
        }
        <Switch>
          <Route exact path='/' component={Homepage}/>
          <Route exact path='/about' component={About}/>
          <Route exact path='/contact' component={Contact}/>
        </Switch>
      <Footer/>

    </div>
  );
  

Вот полное решение..

Вам нужен специальный обработчик для закрытия SideDrawer и некоторые изменения css.

sideDrawer.js

 import React from "react";
import style from "./side-drawer.module.css";
import { Link } from "react-router-dom";

const SideDrawer = (props) => {
  let drawerClasses = [style.sideDrawer, style.Close];
  if (props.show) {
    drawerClasses = [style.sideDrawer, style.Open];
  }

  return (
    <div className={drawerClasses.join(" ")}>
      <div className={style.sideNav}>
        <Link
          to="/about"
          // className={style.Items}
          onClick={props.closed}
          style={{ textDecoration: "none", color: "black" }}
        >
          ABOUT
        </Link>

        <Link
          to="/contact"
          // className={style.Items}
          onClick={props.closed}
          style={{ textDecoration: "none", color: "black" }}
        >
          CONTACT US
        </Link>
      </div>
    </div>
  );
};
export default SideDrawer;  

App.js

 import React, { Component } from "react";
import { Route, Switch } from "react-router-dom";
import SideDrawer from "./sideDrawer";
import { Homepage, About, Contact } from "./Components";
import Header from "./Header";

class App extends Component {
  state = {
    sideDrawerOpen: false
  };

  drawerToggleClickHandler = () => {
    this.setState((prevState) => {
      return { sideDrawerOpen: !prevState.sideDrawerOpen };
    });
  };

  drawerClosedHandler = () => {
    this.setState({ sideDrawerOpen: false });
  };

  render() {
    return (
      <div style={{ height: "100%" }}>
        <Header drawerClickHandler={this.drawerToggleClickHandler} />
        <SideDrawer
          show={this.state.sideDrawerOpen}
          closed={this.drawerClosedHandler}
        />

        <Switch>
          <Route exact path="/" component={Homepage} />
          <Route exact path="/about" component={About} />
          <Route exact path="/contact" component={Contact} />
        </Switch>
        {/* <footer /> */}
      </div>
    );
  }
}
export default App;  

боковой ящик.module.css

module.css из-за использования функции join в sideDrawer.js

 .sideDrawer {
  position: fixed;
  width: 700px;
  max-width: 80%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 600;
  background-color: white;
  box-sizing: border-box;
  transition: transform 0.3s ease-out;
  background-color: yellow;
}

@media (min-width: 900px) {
  .sideDrawer {
    display: none;
  }
}

.sideNav a{
  border: 1px solid black;
  margin: 200px 30px ;
}


.Open {
  transform: translateX(0);
}
.Close {
  transform: translateX(-100%);
}  

полный исходный код