基于2017年react-router/react-transition-group示例的组件不渲染问题求助

Hey there, let's work through this problem where your content components aren't rendering properly, the opacity stays stuck, and old components aren't being removed. Based on what you've described (and the clues from dev tools), here are the most likely fixes to check in your App.js and related files:

1. Make Sure TransitionGroup Has a Unique Key for Route Changes #

TransitionGroup relies on unique key props to track when components enter or leave the DOM. If it can't tell the difference between old and new route content, it won't trigger the exit animation or unmount the old component, and the new one won't get the opacity:1 style.

Update your App.js to pass the location's key to your AnimatedSwitch (and wrap the component with withRouter to get access to the location prop):

import React, { Component } from "react";
import { Route, withRouter } from "react-router-dom";
import TransitionGroup from "react-transition-group/TransitionGroup";
import AnimatedSwitch from "./animated_switch";

class App extends Component {
  render() {
    const { location } = this.props;
    return (
      <TransitionGroup>
        {/* Add a key based on the current location to trigger transitions */}
        <AnimatedSwitch key={location.key} location={location}>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
          {/* Add your other routes here */}
        </AnimatedSwitch>
      </TransitionGroup>
    );
  }
}

// Inject location prop into App using withRouter
export default withRouter(App);

2. Verify Your Transition Styles Are Correct #

If the opacity isn't updating, your CSS is probably missing the required classes that react-transition-group adds during animations. Make sure you have styles for the enter/exit states:

/* Example fade transition styles */
.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms ease-out;
}

Then check your AnimatedSwitch component to ensure it's using the correct classNames prop in the CSSTransition wrapper:

// Inside animated_switch.js
import { CSSTransition } from "react-transition-group";

// ... rest of your code
<CSSTransition
  key={location.key}
  timeout={300}
  classNames="fade" // Matches the CSS class prefix above
  unmountOnExit // Ensures old components are unmounted after exiting
>
  {/* Your Route component here */}
</CSSTransition>

3. Check AnimatedSwitch Logic for Route Matching #

Your custom AnimatedSwitch needs to properly mimic the built-in Switch behavior (only render the first matching route) while wrapping each route in a transition component. If it's rendering multiple routes at once, that's why old components aren't being removed.

Double-check that your AnimatedSwitch uses the Switch component under the hood and maps children correctly:

// animated_switch.js example
import React from "react";
import { Switch, Route } from "react-router-dom";
import { CSSTransition } from "react-transition-group";

const AnimatedSwitch = ({ children, location, ...rest }) => {
  return (
    <Switch location={location} {...rest}>
      {React.Children.map(children, child => (
        <CSSTransition
          key={location.key}
          timeout={300}
          classNames="fade"
          unmountOnExit
        >
          <Route
            path={child.props.path}
            exact={child.props.exact}
            component={child.props.component}
          />
        </CSSTransition>
      ))}
    </Switch>
  );
};

export default AnimatedSwitch;

4. Confirm Version Compatibility #

2017-era versions of these libraries have specific compatibility needs. Make sure your package.json has matching versions, like:

"dependencies": {
  "react-router-dom": "^4.2.2",
  "react-transition-group": "^2.2.1",
  "react": "^16.2.0",
  "react-dom": "^16.2.0"
}

These versions were widely used together in 2017 and should play nicely without unexpected bugs.

After making these tweaks, your components should render correctly, trigger the opacity transitions, and unmount old components when navigating between routes.

内容的提问来源于stack exchange，提问作者Tom Chapman