前言
React 是目前最流行的前端框架之一，React Router 是 React 的官方路由库，但使用 React Router 时，如果需要为每个路由添加额外的属性或参数，通常需要在每个组件中手动添加，这样就会导致代码重复、可维护性和可扩展性降低。而 react-enhanced-route 正是为了解决这个问题而诞生的。
react-enhanced-route 是一个简单易用的 React 路由库，它通过扩展 React Router，提供了额外的 API，使我们能够轻松地为每个路由添加额外的属性和参数，从而提升了代码的可维护性和可扩展性。
安装
你可以通过 npm 或者 yarn 来安装 react-enhanced-route：
npm install react-enhanced-route # 或者 yarn add react-enhanced-route
使用
react-enhanced-route 提供了一个名为 EnhancedRoute 的组件，我们可以将其用于替代 React Router 中的 Route 组件，从而达到提升路由组件的能力：
-- -------------------- ---- -------
------ - ------------- - ---- -----------------------
------ - ------ ------ - ---- -------------------
----- --- - -- -- -
--------
-------------- ----- -------- ---------- ---------------- --
-------------- ----- ------------- ------------ ----------------- --
-------------- ----------------- ------------ ---------------- --
------ -------------------- --
---------
--以上的示例中，我们通过 EnhancedRoute，为每个路由添加了 title 参数，这样就可以在每个页面中显示不同的 title 了。如果你需要为每个路由添加更多的参数，只需要在 EnhancedRoute 中传入即可。
除了为路由添加属性、参数之外，react-enhanced-route 还提供了一些其他的 API，这些 API 可以帮助我们更好地管理路由，例如：
路由跳转
通过 EnhancedRoute 提供的 to 属性，我们可以在组件内部实现路由的跳转：
import { Link } from 'react-router-dom';
const Home = () => (
<div>
<h1>欢迎来到首页</h1>
<Link to="/about">跳转到关于我们页面</Link>
</div>
);页面切换之前的回调
通过 EnhancedRoute 提供的 beforeLeave 属性，我们可以在路由切换之前执行一些回调函数，例如在页面切换之前询问用户是否需要保存数据：
-- -------------------- ---- -------
----- ---- - -- -- -
----- ---------- ------------ - ------------------------
----- ----------------- - -------------- -- -
-- ------------------------- -
----- ---------- - ---------------------
-- ------------ -
-----------------------
-
-
--
------ -
-----
--------------
------
--- ---- ---
-------
-------------- ------------------------------- --
------
--
--以上示例中，我们通过 EnhancedRoute 提供的 beforeLeave 属性，注册了一个回调函数，在页面切换之前执行，询问用户是否需要保存表单数据。
总结
通过使用 react-enhanced-route，我们可以为每个路由添加额外的属性和参数，从而提升了代码的可维护性和可扩展性，同时也提供了一些其他的 API，帮助我们更好地管理路由。如果你正在使用 React Router，并且需要为每个路由添加额外的功能，那么 react-enhanced-route 一定是一个值得尝试的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672081e8991b448e38df