在前端开发中，路由的使用非常重要。除了常见的基础路由外，React 还提供了一组 React Router 的路由库，用于实现客户端路由。
elmer-react-router 是一个基于 React Router 4.0 开发的 npm 包，可以帮助开发者更快速地实现页面路由。本文将详细介绍 elmer-react-router 的使用教程。
安装
首先，需要在项目中安装 elmer-react-router。可以通过如下命令进行安装：
--- ------- ------ ------------------
安装完成后，还需要一些依赖库才能正常使用。React Router 4.0 之前的版本需要单独安装 react-router 和 react-router-dom，但 4.0 之后只需要安装 react-router-dom。可以使用以下命令安装：
--- ------- ------ ----------------
基本用法
elmer-react-router 的基本用法和 React Router 差不多。比较常用的组件有以下几个：
- BrowserRouter：所有路由的容器，只能有一个，也必须是整个应用的根组件。
- Route：每个路由对应的组件，可以有多个子 Route，和 React 元素的嵌套类似。
- Switch：只渲染首个匹配的 Route，用于避免多个路由同时匹配时产生的问题。
- Link：用于链接不同的 Route。
以下是一个简单的实例：
------ ------ - --------- - ---- --------
------ - -------------- ------ ------- ---- - ---- ---------------------
----- --- ------- --------- -
-------- -
------ -
---------------
-----
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
-----
------
--------
------ --------------
------ --
--------
------ ---------
----- --
--------
---------
------
----------------
--
-
-
-------- ------ -
------ --------------
-
-------- ------- -
------ ---------------
-运行该实例后，可以看到导航栏中 Home 和 About 两个链接。点击链接后，页面会切换到对应的组件。
嵌套路由
在实际项目中，通常需要对路由进行嵌套。这时候，可以借助 react-router 的嵌套路由来实现。
以下是一个示例：
------ ----- ---- --------
------ - -------------- ------ ---- - ---- ---------------------
-------- ----- -
------ -
---------------
-----
----
----
----- --------------------------
-----
-----
--- --
------ -------------- ------------------ --
------
----------------
--
-
-------- -------- ----- -- -
------ -
-----
---------------
----
----
----- --------------------------------- --------
-----
----
----- --------------------------------- --------
-----
----
----- --------------------------------- --------
-----
-----
--- --
------ ------------------------------- ----------------- --
------
-----
-----------------
---------- -- ---------- ------ - ------------
--
------
--
-
-------- ------- ----- -- -
------ ------------- ----- --- ----------------------------
-在上述示例中，点击 Topics 链接后，会进入 Topics 组件。在 Topics 组件中，再次渲染了嵌套的三个子路由，并分别对应着 Topic A，Topic B 和 Topic C。
鉴权路由
除了常规的路由规划外，鉴权路由也是常见的需求之一。一般情况下，鉴权路由是指只有用户通过登录鉴权后才能访问的路由。以下是一个鉴权路由的示例：
------ ----- ---- --------
------ - -------------- ------ -------- - ---- ---------------------
-- ---------------- ------------ --
-- - --------------- --- ----
----- --------------- - -----------------------------
----- ------------ - -- ---------- ---------- ------- -- -- -
------
---------
------------- --
--------------- - -
---------- ---------- --
- - -
---------
-----
--------- ---------
------ - ----- -------------- -
--
--
-
-
--
--
----- ---- - -- -- -------- ----------
----- ----- - -- -- --------- ----------
----- ----- - -- -- --------- ----------
----- --- - -- -- -
---------------
-----
------ ------------- ----------------- --
------------- ----- -------- ---------------- --
------------- ------------- ----------------- --
------
----------------
--
------ ------- ----在上述示例中，首先判断用户信息是否存在（即用户是否登录），存在则渲染对应的组件，不存在则重定向到登录页面。具体实现方式是通过自定义一个 PrivateRoute 组件并调用一个 Render 方法实现的。
总结
本文介绍了 elmer-react-router 的使用教程，包括基本用法、嵌套路由和鉴权路由。elmer-react-router 是一个轻量级的路由库，易于使用，能够快速对项目进行路由规划。对于需要使用 React Router 的项目，推荐尝试使用 elmer-react-router。
完整示例代码请参见 GitHub Repo。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005609b81e8991b448ded50