React Router 是一个常用的路由库，用于构建 Web 应用中的页面导航。React Router 提供了一种声明式的方式来定义路由，并且能够处理多个页面之间的导航，同时还能够实现路由切换时的动画效果等功能。在 React 应用中使用 React Router 可以提高应用的可维护性和可扩展性，下面介绍一些 React Router 的最佳实践。
安装和配置
使用 React Router 需要安装和配置，现在的 React Router 版本是 5.x，可以通过 NPM 安装。
npm install react-router-dom
安装好后，需要在应用中进行基本的配置。在应用的入口文件中，一般是 index.js 文件，需要添加路由配置，使用 BrowserRouter 组件进行包裹。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------- - ---- -------------------
------ --- ---- --------
----------------
---------------
---- --
-----------------
-------------------------------
--路由定义
在 React Router 中，路由的定义是通过组件实现的。每个路由对应一个组件，当用户访问该路由时，会渲染对应的组件。可以使用 Route 组件来定义路由，并设置 path 属性表示路由地址，component 属性表示对应的组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- -------------------
------ --------- ---- --------------------
------ --------- ---- --------------------
-------- ----- -
------ -
-----
------ ----- -------- --------------------- --
------ ------------- --------------------- --
------
--
-在上面的代码中，通过 exact 属性确保路径为 '/' 的路由只在访问根路由时渲染。
路由参数
在应用中，可能需要通过路由传递参数，例如用户的 ID、产品的 ID 等等。React Router 支持在路由地址中添加参数，同时能够通过 props 传递参数给组件。
设置路由参数的方式是在 path 属性中添加 :，表示该位置为参数，例如 /user/:id。当用户访问该路由时，React Router 会提取出该参数，放在 match 对象中。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- -------------------
------ -------- ---- -------------------
-------- ----- -
------ -
-----
------ ---------------- -------------------- --
------
--
-在 UserPage 组件中，可以通过 props.match.params.id 获取路由参数值。
import React from 'react';
function UserPage(props) {
return <div>User ID: {props.match.params.id}</div>;
}
export default UserPage;嵌套路由
在应用中，可能存在多级路由的情况，例如 /products/123 和 /products/123/details。React Router 支持嵌套路由，在父级路由下定义子级路由。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- -------------------
------ ------ ---- ----------------------
------ ------------ ---- -----------------------
------ ----------------- ---- ----------------------------
-------- ----- -
------ -
-----
------ -------- ------------------ --
--------
------ ---------------- ------------------------ --
------ -------------------- ----------------------------- --
---------
------
--
-在 Layout 组件中，需要使用 props.children 渲染子级路由对应的组件。
-- -------------------- ---- -------
------ ----- ---- --------
-------- ------------- -
------ -
-----
------ ------------
--- --
----------------
------
--
-
------ ------- -------路由跳转
在应用中，可能需要手动跳转路由，例如用户登录成功后跳转到首页。React Router 提供了 Link 组件和 history 对象来进行路由跳转。
使用 Link 组件可以渲染一个链接，用户点击链接时将跳转到对应路由。to 属性表示要跳转的路由地址。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- -------------------
-------- ---------------- -
------ -
-----
----------- -- -- ------------
----- ------------------------
------
--
-
------ ------- ----------使用 history 对象可以进行编程式导航，对于一些需要在代码中控制的路由跳转操作比较方便。可以通过 props.history.push() 方法进行跳转。
-- -------------------- ---- -------
------ ----- ---- --------
-------- ---------------- -
-------- ------------- -
-- ----------
------------------------
-
------ -
-----
--------------
------- -------------------------------------
------
--
-
------ ------- ----------路由守卫
在应用中，可能需要对某些路由进行权限控制，例如需要用户登录后才能访问某些页面。React Router 提供了一种方式来实现路由守卫。
使用 Route 组件的 render 属性可以定义一个函数，函数返回对应的组件或重定向到其他路由。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ -------- - ---- -------------------
-------- -------------- ---------- ---------- ------- -- -
----- ---------- - -----------------------------------
------ -
------
---------
--------------- --
---------- - -
---------- ---------- --
- - -
--------- ----- --------- --------- ------ - ----- -------------- - -- --
-
-
--
--
-
------ ------- -------------在上面的代码中，定义了一个 PrivateRoute 组件，该组件用于对需要登录权限的页面进行控制。如果用户已经登录，返回对应的组件；如果用户没有登录，则重定向到登录页面，并在重定向前记录当前页面的路由地址，以便登录后跳转回原先访问的页面。
动画过渡
在路由切换时，可以添加动画过渡效果来提高用户体验。React Router 5.x 版本提供了 react-transition-group 组件库，该组件库可以方便地处理路由动画效果。
下面通过一个例子来演示如何使用 react-transition-group 实现页面切换时的动画效果。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ------ -------- - ---- -------------------
------ - -------------- --------------- - ---- -------------------------
------ --------- ---- --------------------
------ --------- ---- --------------------
------ ------------
-------- ----- -
------ -
---- ----------------
------
---------- -------- -- -- -
-----------------
-------------- ------------------ ----------------- --------------
------- --------------------
------ ----- -------- --------------------- --
------ ------------- --------------------- --
--------- ------ --
---------
----------------
------------------
--
--
------
--
-
------ ------- ----在 Switch 组件中添加 TransitionGroup 和 CSSTransition 组件，TransitionGroup 组件会在子元素有变化时添加或删除过渡效果；CSSTransition 组件用于根据定义的 CSS 类名在过渡期间添加或移除样式。
在 CSS 中定义过渡效果的方式如下：
-- -------------------- ---- ------- ----------- - -------- -- - ------------------ - -------- -- ----------- ------- ------ - ---------- - -------- -- - ----------------- - -------- -- ----------- ------- ------ -
在上面的例子中，使用了 fade 类名来定义过渡效果，包括 fade-enter、fade-enter-active、fade-exit、fade-exit-active 四个状态。其中，-enter 和 -enter-active 表示进入时的过渡效果，-exit 和 -exit-active 表示离开时的过渡效果。
总结
以上是在 React 中使用 React Router 的最佳实践，包括安装和配置、路由定义、路由参数、嵌套路由、路由跳转、路由守卫和动画过渡等方面。使用 React Router 可以方便地管理应用中的路由和视图，提高应用的可维护性和可扩展性。在实际开发中，需要注意 React Router 的使用细节，同时需要根据实际情况来扩展和优化功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646f0e44968c7c53b0d715ee