react-router 路由切换动画的实现示例

React Router 是 React 官方推出的用于构建单页应用（SPA）的路由库。

实现路由切换动画的过程可以分为以下几个步骤：

1. 安装 react-router-dom 和 react-transition-group

npm install react-router-dom react-transition-group

1. 使用 BrowserRouter 或 HashRouter 组件包裹应用

在应用的入口文件中，使用 BrowserRouter 或 HashRouter 组件包裹应用。BrowserRouter 使用 HTML5 API，需要服务器支持，而 HashRouter 只使用 URL 中的锚点来模拟路由，不需要特殊服务器支持。

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

import App from "./App";

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

1. 创建路由配置

在创建路由配置时，我们可以使用 Route 组件来指定路径和对应的组件。

import React from "react";
import { Switch, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";

const Routes = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </Switch>
  );
};

export default Routes;

1. 使用 CSSTransition 包裹组件

在路由切换时添加动画效果，可以使用 react-transition-group 库中的 CSSTransition 组件。

import React from "react";
import { CSSTransition } from "react-transition-group";
import "./fade.css";

const Fade = ({ children, ...props }) => (
  <CSSTransition {...props} timeout={300} classNames="fade">
    {children}
  </CSSTransition>
);

export default Fade;

timeout 属性指定动画时间，classNames 属性指定 CSS 类名前缀，children 属性为组件的子节点。

1. 在路由组件中使用 Fade 组件

import React from "react";
import { Route, Switch, withRouter } from "react-router-dom";
import Fade from "./Fade";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";

const AnimatedSwitch = withRouter(({ location }) => (
  <div className="App">
    <Fade key={location.pathname}>
      <Switch location={location}>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Fade>
  </div>
));

export default AnimatedSwitch;

在路由组件中使用 Fade 组件包裹 Route 组件，并使用 location 属性指定当前路由路径。

示例1：实现左右滑动切换动画

/* fade.css */
.fade-enter {
  opacity: 0;
  transform: translateX(100%);
}

.fade-enter-active {
  opacity: 1;
  transform: translateX(0%);
  transition: all 300ms ease-in-out;
}

.fade-exit {
  opacity: 1;
  transform: translateX(0%);
}

.fade-exit-active {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 300ms ease-in-out;
}

/* Slide.js */
import React from "react";
import { CSSTransition } from "react-transition-group";
import "./slide.css";

const Slide = ({ children, ...props }) => (
  <CSSTransition {...props} timeout={300} classNames="slide">
    {children}
  </CSSTransition>
);

export default Slide;

/* slide.css */
.slide-enter {
  opacity: 0;
  transform: translateX(100%);
}

.slide-enter-active {
  opacity: 1;
  transform: translateX(0%);
  transition: all 300ms ease-in-out;
}

.slide-exit {
  opacity: 1;
  transform: translateX(0%);
}

.slide-exit-active {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 300ms ease-in-out;
}

/* AnimatedSwitch.js */
import React from "react";
import { Route, Switch, withRouter } from "react-router-dom";
import Slide from "./Slide";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";

const AnimatedSwitch = withRouter(({ location }) => (
  <div className="App">
    <Slide key={location.pathname}>
      <Switch location={location}>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Slide>
  </div>
));

export default AnimatedSwitch;

示例2：实现淡入淡出切换动画

/* fade.css */
.fade-enter {
  opacity: 0;
}

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

.fade-exit {
  opacity: 1;
}

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

/* AnimatedSwitch.js */
import React from "react";
import { Route, Switch, withRouter } from "react-router-dom";
import Fade from "./Fade";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";

const AnimatedSwitch = withRouter(({ location }) => (
  <div className="App">
    <Fade key={location.pathname}>
      <Switch location={location}>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Fade>
  </div>
));

export default AnimatedSwitch;

综上所述，我们可以通过 react-router-dom 和 react-transition-group 库来实现路由切换动画。在创建路由时，将需要进行动画切换的组件包裹在 CSSTransition 组件中，通过添加 CSS 类名和设置动画时间来实现不同的动画效果。