通過一個例子來說明如何實現。

1，實現路由切換

基礎樣式

App.jsx

import { BrowserRouter as Router, Route, NavLink } from "react-router-dom";
import { Home, News, Goods } from "./page";
import "./App.css";export default function App() {return (<div className="container"><Router><div className="nav-box"><NavLink to="/" exact>首頁</NavLink><NavLink to="/news">新聞頁</NavLink><NavLink to="/goods">商品頁</NavLink></div><div className="page-box"><Route path="/" exact component={Home}></Route><Route path="/news" component={News}></Route><Route path="/goods" component={Goods}></Route></div></Router></div>);
}

App.css

.container {margin: 0 auto;width: 400px;
}.nav-box {background-color: lightblue;line-height: 3;text-align: center;
}.nav-box a {display: inline-block;margin: 10px;
}.nav-box a.active {color: salmon;
}.page-box {height: 200px;outline: 1px solid salmon;
}

page.jsx

import React from "react";
import "./page.css";export function Home() {return <div className="page home">Home</div>;
}export function News() {return <div className="page news">News</div>;
}export function Goods() {return <div className="page goods">Goods</div>;
}

page.css

.page {height: 100%;text-align: center;
}.home {background-color: lightblue;
}.news {background-color: lightgreen;
}.goods {background-color: lightyellow;
}

顯示效果：

2，使用 CSSTransition 添加動畫

CSSTransition 的使用參考 React@16.x（33）動畫（上）

先看最終效果

1. 可以看到路由頁面（一開始）是重疊在一起的，所以需要使用絕對定位來實現。
2. 動畫過程中，對應的路由頁面在動畫開始前，應該是未加載的狀態。同理，退出后應該是卸載狀態。所以在 CSSTransition 組件上需要添加 mountOnEnter 和 unmountOnExit

完整代碼：

1，自定義動畫組件 TransitionRoute.jsx

match 屬性未匹配時為 null。

import React from "react";
import { Route } from "react-router-dom";
import { CSSTransition } from "react-transition-group";
import "animate.css";export default function TransitionRoute(props) {const { component: Comp, ...rest } = props;return (<Route {...rest}>{({ match }) => {return (<CSSTransitionin={!!match}timeout={500}mountOnEnterunmountOnExitclassNames={{enterActive: "animate__fadeInRight",exitActive: "animate__fadeOutLeft",}}><Comp></Comp></CSSTransition>);}}</Route>);
}

2，App.jsx

只需要將 Route 替換為 TransitionRoute 即可。

3，樣式改動

App.css，父級元素添加相對定位。

.page-box {position: relative;
}

page.jsx。因為想使用 animate.css，所以對進行動畫的元素添加公共樣式 animate__animated

import React from "react";
import "./page.css";export function Home() {return <div className="page animate__animated home">Home</div>;
}export function News() {return <div className="page animate__animated news">News</div>;
}export function Goods() {return <div className="page  animate__animated goods">Goods</div>;
}

page.css，添加絕對定位。

.page {position: absolute;left: 0;top: 0;height: 100%;width: 100%;
}

3，注意點

• 當不使用 Swtich 組件時，每個Route 組件都會加載，只是不顯示而已。所以可實現切換路由的動畫。
• 使用 Swtich 組件后，因為它只會加載匹配到的 Route 組件，其他Route 組件并沒有加載，所以無法完成退出進入動畫。

在 React 的插件中可以檢查下：

不使用 Switch 組件時，3個 Route 組件都會渲染，只是未匹配的不展示：

使用 Switch 后，只會渲染一個 Route 組件：

---

以上。