在前端开发过程中，路由是一个必不可少的部分。但是，由于 JavaScript 和 ReasonML 之间存在一些语法差异，因此，我们需要一个工具桥梁，来使得前端路由在 ReasonML 中得以运用。bs-react-router 就是这样一个完美的 npm 包。
下面，我们就来详细地了解一下如何使用 bs-react-router。
第一步：安装 bs-react-router npm 包
首先，我们需要在我们的项目中安装 bs-react-router。可以通过 npm 命令行工具来安装：
npm install --save bs-react-router
第二步：定义路由
安装成功之后，我们就需要来定义路由了。为了演示方便，我们可以定义三个路由：
-- -------------------- ---- -------
------ ----- - --------------------
------ ------ - ---------------------
------ ---- - -------------------
------ ------ - ---------------------
--- ---- - --------- -- -
--------
--------
------ ----- -------- -------- - -- --------- -- - --
------ ------------- -------- - -- ---------- -- - --
------ --------------- -------- - -- ------------ -- - --
---------
----------
--在上面的代码中，我们通过 BsReactRouter 的 Route、Switch、Link 和 Router 模块来定义了三个路由：首页（/）、关于我们（/about）和联系我们（/contact）。
第三步：添加链接
接下来，我们需要在我们的组件中添加链接，使得用户可以点击链接跳转到相应的页面。为此，我们需要使用 BsReactRouter 提供的 Link 组件：
-- -------------------- ---- -------
------ ---- - -------------------
--- ---- - - -- -
-----
----- ------ -----------------
----- ------------------------
----- ----------------------------
-------
--在上面的代码中，我们通过 BsReactRouter 的 Link 组件添加了三个链接：Home、About 和 Contact。其中，to 属性表示我们要跳转的路由，而 exact 属性用于确保只有在精确匹配路由时才会激活该链接。
第四步：创建路由组件
最后，我们需要创建我们的路由组件，将我们定义的路由封装进去：
-- -------------------- ---- -------
------ ----- - --------------------
------ ------ - ---------------------
------ ---- - -------------------
------ ------ - ---------------------
--- ---- - --------- -- -
--------
-----
----- ------ -----------------
----- ------------------------
----- ----------------------------
------
--------
------ ----- -------- -------- - -- --------- -- - --
------ ------------- -------- - -- ---------- -- - --
------ --------------- -------- - -- ------------ -- - --
---------
----------
--在上述代码中，我们创建了一个名为 make 的路由组件，在组件中使用 Router、Link、Switch 和 Route 组件，将我们定义的路由和链接组合起来。此时，我们就可以根据自己的需求对路由进行文章。
总结
bs-react-router 就是这样一个非常实用的 npm 包，可以帮助我们在 ReasonML 中使用前端路由。在以上四个步骤中，我们通过安装 npm 包、定义路由、添加链接和创建路由组件，详细地介绍了如何使用 bs-react-router。希望这篇文章能够帮助大家更好地理解和应用 bs-react-router。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cc281e8991b448e63ff