Javascript 为什么react过渡组在路由更改时不调用componentWillEnter或componentWillLeave？

我遵循此hackernoon指南，以便在路线更改时将进入和离开动画应用于我的react组件。我显然已经调整了代码以适应我的站点，并且决定不使用动画，而只是使用纯CSS。现在我只是用console.log语句测试代码，我注意到在路由更改时没有调用componentWillEnter和componentWillLeave。此外，ComponentWillExister只会被调用一次

以下是每个组件的相关代码，包括App.js和index.js：

动画包装器：

import React, {Component} from "react";
import styles from '../styles/AnimatedWrapper.css';

const AnimatedWrapper = WrappedComponent =>
  class AnimatedWrapper extends Component {
    componentWillAppear(cb) {
      console.log('componentWillAppear');
      cb();
    }
    componentWillEnter(cb) {
      console.log('componentWillEnter');
      cb();
    }
    componentWillLeave(cb) {
      console.log('componentWillLeave');
      cb();
    }
    render() {
      return (
        <div id="animated-wrapper" className={styles.animatedPageWrapper}>
          <WrappedComponent {...this.props}/>
        </div>
      );}
    };

export default AnimatedWrapper;

import React，{Component}来自“React”；
从“../styles/AnimatedWrapper.css”导入样式；
常量AnimatedWrapper=WrappedComponent=>
类AnimatedWrapper扩展组件{
组件将出现（cb）{
console.log（'componentwillbeen'）；
cb（）；
}
组件输入（cb）{
console.log（'componentWillEnter'）；
cb（）；
}
组件将离开（cb）{
console.log（'componentwillleft'）；
cb（）；
}
render（）{
返回(
);}
};
导出默认动画包装器；

App.js：

import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import TransitionGroup from "react-transition-group/TransitionGroup";

import Navbar from "./components/Navbar";
import Footer from "./components/Footer";
import Slider from "./components/Slider";
import ComingSoon from "./components/ComingSoon";

const firstChild = props => {
  const childrenArray = React.Children.toArray(props.children);
  return childrenArray[0] || null;
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <Navbar />
        <Switch>
          <Route
            path="/coming-soon"
            children={({ match, ...rest }) => (
              <TransitionGroup component={firstChild}>
                {match && <ComingSoon {...rest} />}
              </TransitionGroup>
          )}/>
          <Route
             path="/"
             children={({ match, ...rest }) => (
               <TransitionGroup component={firstChild}>
                 {match && <Slider {...rest} />}
               </TransitionGroup>
          )}/>
        </Switch>
        <Footer />
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“react router dom”导入{Route，Switch}；
从“反应转换组/转换组”导入转换组；
从“/components/Navbar”导入导航栏；
从“/components/Footer”导入页脚；
从“/components/Slider”导入滑块；
从“/components/ComingSoon”导入ComingSoon；
const firstChild=props=>{
const childrenArray=React.Children.toArray（props.Children）；
返回childrenArray[0]| | null；
}
类应用程序扩展组件{
render（）{
返回(
(
{匹配&&}
)}/>
(
{匹配&&}
)}/>
);
}
}
导出默认应用程序；

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import './index.css';

ReactDOM.render(
  <BrowserRouter>
     <App />
   </BrowserRouter>,
  document.getElementById('root')
);

从“React”导入React；
从“react dom”导入react dom；
从“react router dom”导入{BrowserRouter}；
从“./App”导入应用程序；
导入“./index.css”；
ReactDOM.render(
,
document.getElementById（'root'））
);

Slider.js：

import React, { Component } from 'react';
import _ from 'lodash';

// components
import AnimatedWrapper from './AnimatedWrapper';
import Separator from './Separator';

// styles
import styles from '../styles/Slider.css';

// images
import Apartment from "../../public/images/apartment.jpg";
import Floor from "../../public/images/floor.jpg";
import Furniture from "../../public/images/furniture.jpg";
import Kitchen1 from "../../public/images/kitchen.jpg";
import Kitchen2 from "../../public/images/kitchen-2.jpg";

class SliderComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      currentSlide: 0,
      slides: [Apartment, Floor, Furniture, Kitchen1, Kitchen2]
    };
  }

  componentDidMount() {
    this.zoomAnimation();
    this.slideContentAnimation();

    this.sliderInterval = setInterval(() => {
      if (this.state.currentSlide === 4) {
        if (this.refs.slider) {
          this.setState({ currentSlide: 0 });
        }
      } else {
        if (this.refs.slider) {
          this.setState({ currentSlide: this.state.currentSlide + 1 });
        }
      }
    }, 6000);
  }

  componentWillUpdate() {
    const currentContent = document.getElementById(`content-${this.state.currentSlide}`);
    setTimeout(() => {
      currentContent.classList.remove(`${styles.currentContent}`);
    }, 1500);
  }

  componentDidUpdate() {
    this.zoomAnimation();
    this.slideContentAnimation();
  }

  setSlide(number) {
    this.setState({ currentSlide: number });
  }

  zoomAnimation() {
    setTimeout(() => {
      const currentSlide = document.getElementById(`slide-${this.state.currentSlide}`);
      currentSlide.classList.add(`${styles.slideZoom}`);
    }, 500);
  }

  slideContentAnimation() {
    setTimeout(() => {
      const currentContent = document.getElementById(`content-${this.state.currentSlide}`);
      if (currentContent) {
        currentContent.classList.add(`${styles.currentContent}`);
      }
    }, 1500);
  }

  renderSlides() {
    return this.state.slides.map((slide, index) => {
      const isCurrent = index === this.state.currentSlide;

      const slideStyle = {
        backgroundImage: `url(${this.state.slides[index]})`
      }

      return (
        <div
          id={`slide-${index}`}
          key={`slide-${index}`}
          className={`
            ${styles.slide}
            ${isCurrent ? styles.currentSlide : null}
          `}
          style={slideStyle}
          alt="slide">
            <div
              id={`content-${index}`}
              key={`content-${index}`}
              className={`
                ${styles.content}
            `}>
              <h1>{`WE SPECIALIZE IN KITCHENS ${index}`}</h1>
              <Separator
                containerWidth={720}
                circleWidth={5}
                circleHeight={5}
                backgroundColor="#fff"
                lineWidth={350}
                lineColor="#fff"
              />
              <div
                className={`${styles['hvr-sweep-to-top']} ${styles.btn}`}>
                More Information
              </div>
            </div>
        </div>
      );
    });
  }

  renderNavBar() {
    return (
      <div className={styles.sliderNav}>
        {_.range(5).map((index) => {
          return (
            <div
              key={index}
              onClick={() => this.setSlide(index)}
              className={this.state.currentSlide === index ? styles.current : null}>
            </div>
          )
        })}
      </div>
    )
  }

  render() {
    return (
      <div className={styles.container} ref="slider">
        <div className={styles.slidesContainer}>
          {this.renderSlides()}
        </div>

        {this.renderNavBar()}
      </div>
    );
  }
}

const Slider = AnimatedWrapper(SliderComponent);
export default Slider;

import React，{Component}来自'React'；
从“lodash”进口；
//组成部分
从“./AnimatedWrapper”导入AnimatedWrapper；
从“./分隔符”导入分隔符；
//风格
从“../styles/Slider.css”导入样式；
//图像
从“../../public/images/partment.jpg”导入公寓；
从“../../public/images/Floor.jpg”导入地板；
从“../../public/images/Furniture.jpg”导入家具；
从“../../public/images/kitchen.jpg”导入Kitchen1；
从“../../public/images/kitchen-2.jpg”导入Kitchen2；
类SliderComponent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
当前幻灯片：0，
幻灯片：[公寓、地板、家具、厨房1、厨房2]
};
}
componentDidMount（）{
这是动物实验（）；
这个.slideContentAnimation（）；
this.slideInterval=setInterval（（）=>{
if（this.state.currentSlide==4）{
如果（此.refs.滑块）{
this.setState（{currentSlide:0}）；
}
}否则{
如果（此.refs.滑块）{
this.setState（{currentSlide:this.state.currentSlide+1}）；
}
}
}, 6000);
}
componentWillUpdate（）{
const currentContent=document.getElementById（`content-${this.state.currentSlide}`）；
设置超时（（）=>{
currentContent.classList.remove（`${styles.currentContent}`）；
}, 1500);
}
componentDidUpdate（）{
这是动物实验（）；
这个.slideContentAnimation（）；
}
固定滑块（编号）{
this.setState（{currentSlide:number}）；
}
动物繁殖{
设置超时（（）=>{
const currentSlide=document.getElementById（`slide-${this.state.currentSlide}`）；
currentSlide.classList.add（`styles.slideZoom}`）；
}, 500);
}
slideContentAnimation（）{
设置超时（（）=>{
const currentContent=document.getElementById（`content-${this.state.currentSlide}`）；
如果（当前内容）{
currentContent.classList.add（`style.currentContent}`）；
}
}, 1500);
}
渲染滑块（）{
返回此.state.slides.map（（幻灯片，索引）=>{
const isCurrent=index==this.state.currentSlide；
常量幻灯片样式={
backgroundImage:`url（${this.state.slides[index]}）`
}
返回(
{`我们专门经营厨房${index}`}
更多信息
);
});
}
renderNavBar（）{
返回(
{范围（5）.map（（索引）=>{
返回(
this.setSlide（index）}
className={this.state.currentSlide==index？styles.current:null}>
)
})}
)
}
render（）{
返回(
{this.renderSlides（）}
{this.renderNavBar（）}
);
}
}
常量滑块=动画包装器（滑块组件）；
导出默认滑块；

ComingSoon.js：

import React from 'react';
import AnimatedWrapper from './AnimatedWrapper';
import styles from '../styles/ComingSoon.css';

const ComingSoonComponent = function() {
  return (
    <div>
      <div className={styles.mainContent}>
        <div>
          <h1 className={styles.mainTitle}>{`Coming Soon`}</h1>
        </div>
      </div>
    </div>
  );
};

const ComingSoon = AnimatedWrapper(ComingSoonComponent);
export default ComingSoon;

从“React”导入React；
从“./AnimatedWrapper”导入AnimatedWrapper；
从“../styles/ComingSoon.css”导入样式；
const ComingSoonComponent=函数（）{
返回(
{`马上就来`}
);
};
const ComingSoon=AnimatedWrapper（ComingSoonComponent）；
出口违约即将来临；

尝试使用，它会有所帮助

你可以这样使用它。主要代码如下：

import { BrowserRouter, Route, Switch, Link } from 'react-router-dom'
import { CSSTransition, TransitionGroup } from 'react-transition-group'

const PageFade = (props) => (
  <CSSTransition 
    {...props}
    classNames="fadeTranslate"
    timeout={1000}
    mountOnEnter={true}
    unmountOnExit={true}
  />
)

const Layout = ({ children }) => (
  <section>
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Non existing</Link></li>
      </ul>
    </nav>
    <hr />
    {children}
  </section>
)

const App = (props) => {
  const locationKey = props.location.pathname

  return (
  <Layout>
    <TransitionGroup>
      <PageFade key={locationKey}>
        <section className="fix-container">
          <Switch location={props.location}>
            <Route exact path="/" component={Home} />
            <Route exact path="/about" component={About} />
            <Route component={NotFound} />
          </Switch>
        </section>
      </PageFade>
    </TransitionGroup>
  </Layout>
  )
}

const BasicExample = () => (
  <BrowserRouter>
    <Route path="/" component={App} />
  </BrowserRouter>
);

render(<BasicExample />, document.getElementById('root'));

从'react router dom'导入{BrowserRouter，Route，Switch，Link}
从'react transition group'导入{CSTranslation，TransitionGroup}
常数PageFade=（道具）=>(
)
常量布局=（{children}）=>(

家
关于
不存在