React是一种JavaScript库，它经常用于构建可重用的UI组件。React Router则是一个React库，它可以帮助开发者在React应用中实现客户端路由。当然，React Router还包含许多其他功能，包括提供编程式导航、重定向、请求保护等。
而在React Router中，有一个非常有用的扩展组件——react-router-hash-route。它允许我们在React应用程序中使用哈希路由。也就是说，我们可以使用像#about这样的哈希值将用户指向页面内的不同部分而不需要刷新整个页面。在这篇文章中，我们将介绍如何使用npm包react-router-hash-route。
安装和导入
首先，我们需要使用npm安装react-router-hash-route。你可以在终端中使用以下命令进行安装：
npm install react-router-hash-route
安装完成后，请在你的项目中导入该库。使用以下JavaScript代码：
import { HashRouter, Route, Switch } from 'react-router-hash-route';
HashRouter
我们需要使用HashRouter而不是BrowserRouter来设置路由。HashRouter是React Router提供用于启用哈希路由的组件。使用下面的JavaScript代码将HashRouter导入你的文件：
import { HashRouter } from 'react-router-hash-route';
然后，在你的应用程序中包裹你的代码。以下的JSX代码演示了如何将HashRouter包裹在你的代码中：
import { HashRouter } from 'react-router-hash-route';
<HashRouter>
<App />
</HashRouter>Route和Switch
现在，我们需要使用Route和Switch来将组件与定位器(train)，以及客户端路由相结合。如果你已经使用了React Router，那么你可能对这些组件比较熟悉。
Switch组件会逐个逐个测试每个Route组件，仅当找到与实际URL匹配的一个Route组件时才渲染该组件。Route组件本身定义您的应用程序的不同路径，并确定要加载的组件。下面的JSX代码清楚地说明了使用Route和Switch组件的方式：
-- -------------------- ---- -------
------ - ----------- ------ ------ - ---- --------------------------
------ ---- ---- ---------
------ ----- ---- ----------
------ -------- ---- -------------
----- --- - -- -- -
-----
--------
------ ----- -------- ---------------- --
------ ----- ------------- ----------------- --
------ ----- ---------------- -------------------- --
---------
------
--
----- ---- - -- -- --------- -----------
----- ----- - -- -- ---------- -----------
----- ------- - -- -- ------------- -----------哈希路由
有了react-router-hash-route，我们现在可以轻松地创建可用于哈希路由的链接。您可以在JSX中使用Link组件来创建这些链接，如下所示：
-- -------------------- ---- -------
------ - ----------- ------ ------- ---- - ---- --------------------------
------ ---- ---- ---------
------ ----- ---- ----------
------ -------- ---- -------------
----- --- - -- -- -
-----
----
--------- -----------------------
--------- ---------------------- --------------
--------- --------------------------------------------
-----
--------
------ ----- -------- ---------------- --
------ ----- ------------- ----------------- --
------ ----- ---------------- -------------------- --
---------
------
--
----- ---- - -- -- --------- -----------
----- ----- - -- -- -
-----
--------- -- ---------
-- ------------- ------- -----------
------
--
----- ------- - -- -- -
-----
------------ ---------
-- ----------------- ------- --------------
------
--总结
在本文中，我们介绍了npm包react-router-hash-route的使用方法，包括安装和导入，HashRouter，Route和Switch组件，以及哈希路由链接。使用react-router-hash-route，我们可以使我们的React应用程序更加灵活和动态，同时保留真正的单页应用程序的好处。当然，还有很多其他的React Router扩展组件！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664b81e8991b448e26b2